WEB开发中的横竖屏ISSUE

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('竖屏');
        }
    }
复制代码

注①：window.orientation实测只有三个-90 0 90三个取值，网上写的window.orientation == 180，都是文章抄来抄去瞎几把写的； 注②：全部代码理论上不兼容ie6789，没办法，我不爱用ie；

7.下期预告：JavaScript零级 二级 三级 事件绑定机制探究......

我叫刘大洋！移动端更多奇技淫巧敬请期待.....