屏幕旋转
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了屏幕旋转相关的知识,希望对你有一定的参考价值。
禁止用户屏幕旋转。
这点可以肯定的说是做不到的,之前因为有项目需要禁止屏幕旋转,所以网上查阅了大量的资料,发现根本没有解决办法,在移动版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>
以上是关于屏幕旋转的主要内容,如果未能解决你的问题,请参考以下文章
Android 片段不保存状态,在旋转/屏幕锁定/返回时崩溃