檢測移動裝置橫豎屏

移動端的開發過程中，免不了要判斷橫豎屏，然後在執行其他操作，比如分別載入不同樣式，橫屏顯示某些內容，豎屏顯示其他內容等等。

移動裝置提供了兩個物件，乙個屬性，乙個事件：

這兩個搭配起來使用，很容易就能獲得裝置的橫豎屏狀態，**如下：

(function

()           
//do something
//比如在html標籤加乙個狀態
//然後根據不同狀態，顯示不同大小
document.body.parentnode.setattribute('class',orientation);
};window.addeventlistener('orientationchange',updateorientation,false
);        updateorientation();
};window.addeventlistener('domcontentloaded',init,false
);})();

在css中就可以這樣寫：

/*

*豎屏 div邊框顯示藍色*
*/.portrait body div
/**豎屏 div邊框顯示黃色*
*/.landscape body div

@media all and (orientation: portrait) }

@media all and (orientation: landscape) }

如果window.orientation或者orientationchange在裝置中不存在的情況怎麼處理呢？（一般乙個不存在，另乙個也不存在，反之）

在前期開發中，經常會用chrome的device model調式，但是這個屬性確實不存在，哪怎麼獲得這個值呢？簡單的方式就是依據寬和高的大小比較判斷，寬小於高為豎屏，寬大與高就是橫屏。

獲得結果的方式知道了，接下來就是怎麼監聽裝置反轉事件了，既然orientationchange不可用，就使用最基本的resize事件或者使用定時器檢測，還是看**：

(function

();    
var init = function
();    window.addeventlistener('domcontentloaded',init,false
);})();

最後，把以上兩種方式合起來，就是乙個完整的檢測解決方案

(function

()            }
else
htmlnode.setattribute('class',orientation);
};if(supportorientation)
else
updateorientation();
};window.addeventlistener('domcontentloaded',init,false
);})();

參考：

dealing with device orientation

js css 檢測移動裝置方向的變化 判斷橫豎螢幕

方法一 用觸發手機的橫屏和豎屏之間的切換的事件 window.addeventlistener orientationchange function false 方法二 監聽調整大小的改變 window.addeventlistener resize function false css判斷橫豎螢幕...

js css 檢測移動裝置方向的變化 判斷橫豎螢幕

最近做的站點是既要電腦各個瀏覽器能訪問，ipad又要能訪問，ipad又分幾種，又有橫豎屏區別，需要考慮的東西還是很多。下面是一些區分橫豎屏的 方法一 用觸發手機的橫屏和豎屏之間的切換的事件 window.addeventlistener orientationchange function fals...

更靠譜的移動端橫豎屏檢測方法

前不久，做了乙個h5專案，需要在橫豎屏變化時，做一些處理。毫無疑問，需要使用orientationchange來監聽橫豎屏的變化。方案一 監聽 orientation changes window.addeventlistener orientationchange function event f...