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

朴灿烈づ我的快乐病毒、 2022-09-10 14:28 224阅读 0赞

复制全部内容到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+条 前端面试题 收藏以后面试用得上 ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5oqA5pyv56uZ_size_12_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5oqA5pyv56uZ_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/c5ebb66056764aa4ba98195c12822c8a.png