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零級 二級 三級 事件綁定機制探究......

我叫劉大洋！移動端更多奇技淫巧敬請期待.....