WEB开发中的横竖屏ISSUE-CSDN博客

WEB开发中的横竖屏问题

1.onresize兼容性及表现

1）chrome新版

屏幕旋转一次只会调用一次；屏幕放大或缩小偶然调用N次，N取决于缩放比例

事件绑定方式：

//一级事件绑定可以使用
 window.onresize = function () {
        alert(Math.random());
 }
//二级事件绑定可以使用
window.addEventListener("resize", hengshuping, false);
复制代码

2）安卓6.0及以上

屏幕旋转一次只会调用一次；屏幕放大或缩小不会调用

事件绑定方式：

//一级事件绑定可以使用
 window.onresize = function () {
        alert(Math.random());
 }
//二级事件绑定可以使用
window.addEventListener("resize", hengshuping, false);
复制代码

3）iOS10及以上

屏幕旋转一次只会调用两次（窃以为是iOS系统的bug）；屏幕放大或缩小不会调用

事件绑定方式：

//一级事件绑定可以使用
 window.onresize = function () {
        alert(Math.random());
 }
//二级事件绑定可以使用
window.addEventListener("resize", hengshuping, false);
复制代码

2.onorientationchange兼容性及表现（onorientationchange与屏幕缩放无关）

1）chrome新版

屏幕旋转一次只会调用一次，很奇怪的是原型链中有ononorientationchange方法，却只能通过二级事件绑定有效，Dom 0级绑定无效（窃以为是chrome的bug）

事件绑定方式：

  // 没有作用
    window.onorientationchange = function () {
        alert(Math.random());
    }
   // 可以使用
    window.addEventListener("orientationchange", hengshuping, false);
复制代码

2）安卓6.0及以上

屏幕旋转一次只会调用一次

事件绑定方式：

	// 可以作用
    window.onorientationchange = function () {
        alert(Math.random());
    }
   // 可以使用
    window.addEventListener("orientationchange", hengshuping, false);
复制代码

3）iOS10及以上

同上

3.onresize和onorientationchange in window

1）chrome浏览器

"onorientationchange" in window  =>false
"onrisize" in window  =>true
复制代码

2）安卓&iOS

"onorientationchange" in window  =>true
"onrisize" in window  =>true
复制代码

4.PC段监听旋转代码实现

//方式一
//一级事件绑定可以使用
     window.onresize = function () {
            alert(Math.random());
     }
//方式二
//二级事件绑定可以使用
    window.addEventListener("resize", hengshuping, false);
 
//方式三
//一级事件绑定不能使用 不能使用不能使用不能使用！！！！！！！！！！！！！！！！！！！！！
     window.onorientationchange = function () {
            alert(Math.random());
    }
//二级事件绑定可以使用
    window.addEventListener("orientationchange", hengshuping, false);
复制代码

5.PC段监听缩放代码实现

//方式一
//一级事件绑定可以使用
 window.onresize = function () {
        alert(Math.random());
 }
//方式二
//二级事件绑定可以使用
window.addEventListener("resize", hengshuping, false);
复制代码

6.移动端监听旋转代码实现

onresize在iOS中监听旋转回掉函数会执行两次，不推荐使用，如果非要使用，可以下二选一

//方式一
	window.onresize = function () {
        alert(Math.random());
 }
//方式二
	window.addEventListener("resize", hengshuping, false);
复制代码

onorientationchange更适合移动端旋转监听，以下二选一

//方式一
    window.onorientationchange = function () {
        alert(Math.random());
    }
//方式二
    window.addEventListener("orientationchange", hengshuping, false);
复制代码

为防止老版本的移动端不支持onorientationchange，完善后的移动端旋转监听代码如下，百试很爽

 window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
   
    function hengshuping() {      
        if (window.orientation == 0) {
             alert('横屏');
        }

        if (window.orientation == 90 || window.orientation == -90) {
            alert('竖屏');
        }
    }
复制代码