关于移动端H5横竖屏问题

根据项目的一些需求，经常需要横屏展示H5，但对于开启自动横竖屏的手机，横屏时转竖屏，或者竖屏转横屏时，页面布局可能会乱。

通过各个手机设备的测试，主要原因是iphone手机反应比较快，而安卓机稍微慢一点，就不会出现页面布局乱的情况。

于是就对iphone  手机在横竖屏旋转监听时添加延时，解决了画面乱的情况。

以下是部分代码，希望有所帮助。

$(function(){//监听横竖屏旋转，ios 和 Android 写法不一样onResize();if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", onResize, false);}else{window.addEventListener( "resize", onResize, false);}
});function  onResize() {if(Utils.isPortrait()){if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){var timer = setTimeout(function(){portrait();//竖屏时执行的函数clearTimeout(timer);},100);}else{portrait();}} else {if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){var timer = setTimeout(function(){landscape();//横屏时执行的函数clearTimeout(timer);},100);}else{landscape();}}
}

如需要详细完整的案例 可参考代码  https://github.com/Aimee1608/qcdq-erhunzi.git

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！