移動端的開發(fā)過程中，免不了要判斷橫豎屏，然后在執(zhí)行其他操作，比如分別加載不同樣式，橫屏顯示某些內容，豎屏顯示其他內容等等。
如何判斷
移動設備提供了兩個對象，一個屬性，一個事件：
（1）window.orientation 屬于window對象上一個屬性；共有三個值 ：0為豎屏模式（portrait）,90為向左反轉變?yōu)闄M屏模式（landscape），-90為向右反轉變?yōu)闄M屏模式（landscape），最后180就是設備上下互換還是豎屏模式。
（2）orientationchange 是一個event，在設備旋轉時，會觸發(fā)此事件，如同PC上使用的resize事件。
這兩個搭配起來使用，很容易就能獲得設備的橫豎屏狀態(tài)，代碼如下：
(function(){
var init = function(){
var updateOrientation = function(){
var orientation = window.orientation;
switch(orientation){
case 90:
case -90:
orientation = 'landscape';
break;
default:
orientation = 'portrait';
break;
}
//do something
//比如在html標簽加一個狀態(tài)
//然后根據不同狀態(tài)，顯示不同大小
document.body.parentNode.setAttribute('class',orientation);
};
window.addEventListener('orientationchange',updateOrientation,false);
updateOrientation();
};
window.addEventListener('DOMContentLoaded',init,false);
})();
在css中就可以這樣寫：
/**豎屏 div邊框顯示藍色**/
.portrait body div{
border:1px solid blue;
}
/**豎屏 div邊框顯示黃色**/
.landscape body div{
border:1px solid yellow;
}
當然還可以使用media queries的方式（推薦這種）：
@media all and (orientation: portrait) {
body div {
border:1px solid blue;
}
}
@media all and (orientation: landscape) {
body div {
border:1px solid yellow;
}
}
兼容性
如果window.orientation或者orientationchange在設備中不存在的情況怎么處理呢？（一般一個不存在，另一個也不存在，反之）
在前期開發(fā)中，經常會用Chrome的device model調式，但是這個屬性確實不存在，哪怎么獲得這個值呢？簡單的方式就是依據寬和高的大小比較判斷，寬小于高為豎屏，寬大與高就是橫屏。
獲得結果的方式知道了，接下來就是怎么監(jiān)聽設備反轉事件了，既然orientationchange不可用，就使用最基本的resize事件或者使用定時器檢測，還是看代碼：
(function(){
var updateOrientation = function(){
var orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
document.body.parentNode.setAttribute('class',orientation);
};
var init = function(){
updateOrientation();
//每5秒檢查一次
//window.setInterval(updateOrientation,5000);
//監(jiān)聽resize事件
window.addEventListener('resize',updateOrientation,false);
};
window.addEventListener('DOMContentLoaded',init,false);
})();
最后，把以上兩種方式合起來，就是一個完整的檢測解決方案
(function(){
var supportOrientation = (typeof window.orientation === 'number' &&
typeof window.onorientationchange === 'object');
var init = function(){
var htmlNode = document.body.parentNode,
orientation;
var updateOrientation = function(){
if(supportOrientation){
orientation = window.orientation;
switch(orientation){
case 90:
case -90:
orientation = 'landscape';
break;
default:
orientation = 'portrait';
break;
}
}else{
orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
}
htmlNode.setAttribute('class',orientation);
};
if(supportOrientation){
window.addEventListener('orientationchange',updateOrientation,false);
}else{
//監(jiān)聽resize事件
window.addEventListener('resize',updateOrientation,false);
}
updateOrientation();
};
window.addEventListener('DOMContentLoaded',init,false);
})();
總結:
通過orientationchange事件來監(jiān)聽設備是否旋轉，配合window.orientation屬性判斷當前是橫屏還是豎屏，以便執(zhí)行不同的操作。