移动端H5页面横屏竖屏判断

最新推荐文章于 2025-05-27 12:49:17 发布

原创最新推荐文章于 2025-05-27 12:49:17 发布 · 821 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发

javascript 同时被 3 个专栏收录

40 篇文章

订阅专栏

11 篇文章

订阅专栏

h5页面

2 篇文章

订阅专栏

标签设置竖屏：

<meta name="x5-orientation" content="portrait">

css设置样式：

@media screen and (orientation: portrait) {

/*竖屏 css*/

}

@media screen and (orientation: landscape) {

/*横屏 css*/

}

<!-- 竖屏 -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"/>

<!-- 竖屏 -->
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/>

js监听：

window.addEventListener("onorientationchange"in window ? "orientationchange": "resize", function() { 
if (window.orientation === 180 ||window.orientation=== 0){  
  console.log('竖屏状态！'); 
};
 if (window.orientation === 90 ||window.orientation=== -90){  
  console.log('横屏状态！'); 
} 
}, false);

移动端与PC端判断：

function browserRedirect() {
	    var sUserAgent = navigator.userAgent.toLowerCase();
	    if(/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {
	        //跳转手机端wap
	        window.location.href="http://www.xxx.com/wap";
	    }else{
            //跳转pc
	        window.location.href="http://www.xxx.com";
        }
	}
browserRedirect();