目录
一、基于react-hooks封装横屏显示提示兼容组件
二、效果展示图
三、封装的代码、直接引入根路由、一键兼容使用
import React, { useEffect, useState } from "react";
import utils from "../../../utils/utils";
import "./index.less";
const LandscapeMessage = () => {
const [isLandscape, setIsLandscape] = useState(false);
const handleOrientationChange = () => {
setIsLandscape(
(window.orientation === 90 || window.orientation === -90) && !utils.IsPC()
);
// 禁止屏幕滑动,并隐藏滚动条
if (isLandscape && !utils.IsPC()) {
document.body.style.overflow = "hidden";
document.documentElement.style.overflow = "hidden";
document.body.style.touchAction = "none";
} else {
document.body.style.overflow = "auto";
document.documentElement.style.overflow = "auto";
document.body.style.touchAction = "auto";
}
};
useEffect(() => {
handleOrientationChange();
window.addEventListener("orientationchange", handleOrientationChange);
return () =>
window.removeEventListener("orientationchange", handleOrientationChange);
}, []);
return (
<div
id="landscape-message"
style={{ display: isLandscape ? "block" : "none" }}
>
<div className="conents_page">
<img
className="landscape_icon"
src="https://images.artvrpro.com/images/image/landscape.png"
alt=""
/>
<h3 className="title">请将设备旋转至竖屏模式体验</h3>
</div>
</div>
);
};
export default LandscapeMessage;
#landscape-message{
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 1);
z-index: 999;
.conents_page{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 20px;
.landscape_icon{
width: 100px;
}
.title{
color: rgb(245, 239, 239);
}
}
}