关于移动端H5横竖屏问题

最新推荐文章于 2025-04-26 17:54:24 发布

Aimee芊

最新推荐文章于 2025-04-26 17:54:24 发布

阅读量4.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：移动端H5开发前端大杂烩文章标签：移动手机布局 iphone

本文链接：https://blog.youkuaiyun.com/Aimee1608/article/details/78100197

移动端H5开发同时被 2 个专栏收录

18 篇文章

订阅专栏

前端大杂烩

13 篇文章

订阅专栏

根据项目的一些需求，经常需要横屏展示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