移动屏幕旋转解决方法

禁止用户屏幕旋转。

这点可以肯定的说是做不到的,之前因为有项目需要禁止屏幕旋转,所以网上查阅了大量的资料,发现根本没有解决办法,在移动版webkit中根本做不到。苹果api也说明了,我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的orientationchange事件,所以ios是禁止阻止orientationchange事件的,而Android也一样,也是无法禁止屏幕旋转,所以在webapp里是做不到了。但是可以利用orientationchange事件判断方向,横屏时的显示方式与竖屏时的显示方式,写成两种样式。

html部分:

<div class="landscape-tips" style="display: none"> 为了更好的视觉体验,请在竖屏下进行操作。 </div>
js部分:

 
<script>
    //横竖屏提示
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        if (window.orientation === 180 || window.orientation === 0) {
            //options.orientationchange('portrait');
            $(".wrapper").show();
            $(".landscape-tips").hide();
        }
        if (window.orientation === 90 || window.orientation === -90 ){//横屏时
            //options.orientationchange('landscape')
            $(".wrapper").hide();
            $(".landscape-tips").show();
        }
    }, false);
</script>

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值