微信扫一扫看面试题

关注面试题库

监听手机屏幕旋转 横屏 竖屏 dome

复制全部内容到html文件 打开即可测试

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>监听手机屏幕旋转</title>
		<style>
			/*orient tips*/
			.mod-orient-layer {
				display: none;
				position: fixed;
				height: 100%;
				width: 100%;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.9);
				z-index: 9997;
			}

			.mod-orient-layer_content {
				width: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				text-align: center;
			}

			.mod-orient-layer_content::after {
				content: "为了更好的体验，请将手机/平板转过来";
				text-align: center;
				font-size: 16px;
				color: #fff;
				position: absolute;
				top: 50%;
				left: 0;
				height: 30px;
				width: 100%;
				margin-top: 50px;
				z-index: 99999;
			}

			.mod-orient-layer_content::before {
				content: "";
				position: absolute;
				z-index: 99999;
				height: 200px;
				width: 100px;
				left: 50%;
				top: 50%;
				margin: -140px 0 0 -50px;
				color: #fff;
				background-image: url("./images/orient.png");
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 100px auto;
			}
		</style>
	</head>

	<body>
		<div id="one">我是横屏</div>
		<!--竖屏浏览提示-->
		<div id="orientLayer" class="mod-orient-layer">
			<div class="mod-orient-layer_content">
				<div class="mod-orient-layer_desc"></div>
			</div>
		</div>
		<script>
			var evt = "onorientationchange" in window ? "orientationchange" : "resize";
			let orientLayer = document.getElementById("orientLayer");
			window.addEventListener(evt, resize, false);

			function resize(fals) {
				if (window.orientation == 0 || window.orientation == 180) {
					console.log("竖屏状态！");
					orientLayer.style.display = "block"; //竖屏则展示提示
				} else {
					console.log("横屏状态！");
					orientLayer.style.display = "none"; //竖屏则展示提示
				}
			}
			resize(true);
		</script>
	</body>
</html>


扫码获取 1000+条 前端面试题 收藏以后面试用得上


 

posted @ 2022-07-23 10:02  web前端面试小助手  阅读(129)  评论(0)    收藏  举报