前不久，做了乙個h5專案，需要在橫豎屏變化時，做一些處理。毫無疑問，需要使用orientationchange來監聽橫豎屏的變化。
方案一：
// 監聽 orientation changeswindow.addeventlistener("orientationchange"
, function
(event) , false
);
**新增上後，就各種相容性問題。這裡相容性問題出現在兩個地方：
如下是orientationchange事件的相容性：
如下是screen.orientation的相容性：
方案二：
上述方案不行，只能另行他法了。google一下，了解到可以通過resize配合(window.inner/outerwidth, window.inner/outerheight)來實現：
window.addeventlistener("resize"
, function
(event) else
}, false
);
這種方案基本滿足大部分專案的需求，但是還是有些不足之處：
關鍵**如下：
var resizecb =function
() else
return
function
() } else }
} }();
完整**猛擊這裡
方案三：
不過個人覺得通過window.innerwidth > window.innerheight來實現的是一種偽檢測，有點不可靠。 可不可以通過瀏覽器來實現檢測?如基於css3@media**查詢來實現。
如下@media相容性：
如上上圖所示，移動端瀏覽器都支援css3 media。
實現思路：
這裡我選擇的節點font-family作為檢測樣式屬性。理由如下：
1.優先使用排在前面的字型。
2.如果找不到該種字型，或者該種字型不包括所要渲染的文字，則使用下一種字型。
3.如果所列出的字型，都無法滿足需要，則讓作業系統自行決定使用哪種字型。
這樣我們就可以指定特定標識來標識橫豎屏的狀態，不過需要將指定的標識放置在其他字型的前面，這樣就不會引起hmtl字型的變化。
關鍵**如下：
// callbackvar resizecb = function
() } @media (orientation: landscape) }'
; // 載入樣式
loadstylestring(cssstr);
// 新增類
html.classname = 'orientation'
+ html.classname;
if (hstyle['font-family'
] === pstr) else
return
function
()
} else }
} }();
完整**猛擊這裡
測試效果
方案四：
可以再改進一下，在支援orientationchange時，就使用原生的orientationchange，不支援則使用方案三。
關鍵**如下：
// 是否支援orientationchange事件var isorientation = ('orientation'
inwindow &&
'onorientationchange'
inwindow);
// callback
var orientationcb = function
(e)
if (win.orientation === 90 || win.orientation === -90)
return
function
()
if (win.orientation === 90 || win.orientation === -90)
event.trigger
(eventtype, meta);
} };
var callback = isorientation ? orientationcb() : (function
()
})();
// 監聽
win.addeventlistener(isorientation ? eventtype : 'resize'
, callback,
false
);
完整**猛擊這裡
方案五：
目前，上述幾種方案都是通過自定製的訂閱與發布事件模式來實現的。這裡可以基於瀏覽器的事件機制，來模擬orientationchange。即對orientationchange的不相容進行修復。
關鍵**如下：
var eventtype ='orientationchange'
; // 觸發原生orientationchange
var fire = function
() else
else
if (win[
'on'
+ eventtype]) else }
}
更靠譜的橫豎屏檢測方法
前不久，做了乙個h5專案，需要在橫豎屏變化時，做一些處理。毫無疑問，需要使用orientationchange來監聽橫豎屏的變化。方案一 監聽 orientation changes window.addeventlistener orientationchange function event f...
更靠譜的橫豎屏檢測方法
前不久，做了乙個h5專案，需要在橫豎屏變化時，做一些處理。毫無疑問，需要使用orientationchange來監聽橫豎屏的變化。方案一 監聽 orientation changes window.addeventlistener orientationchange function event f...
js判斷移動端橫豎屏狀態
function hengshuping if window.orientation 90 window.orientation 90 相容寫法 window.addeventlistener onorientationchange in window orientationchange resiz...