這篇文章主要介紹了JS檢測移動端橫豎屏的代碼,非常不錯具有參考借鑒價值，需要的朋友可以參考下

使用media來判斷屏幕寬度遇到的問題：

ios上當我旋轉(zhuǎn)屏幕的時候可行，但是安卓機上沒反應(yīng)，橫屏顯示的還是我豎屏的樣式。

查了一下資料，css3的media如果要在移動端有較好的顯示效果，需要在頁頭加上這段代碼

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

可是這段代碼我不能用。因為我的頁面是做了適配的。可以根據(jù)屏幕的大小來顯示字號和樣式的大小。如果我加了這段代碼的話，我的適配就不能用了。所以要用其他方法

解決辦法：

移動端的設(shè)備提供了一個事件：orientationChange事件

這個事件是蘋果公司為safari中添加的。以便開發(fā)人員能夠確定用戶何時將設(shè)備由橫向查看切換為縱向查看模式。

在設(shè)備旋轉(zhuǎn)的時候，會觸發(fā)這個事件，

// Listen for orientation changes

window.addEventListener("orientationchange", function() {

// Announce the new orientation number

alert(window.orientation);

}, false);

只要用戶改變了設(shè)備的查看模式，就會觸發(fā) orientationChange事件。此時的event對象不包含任何有價值的信息，

因為唯一相關(guān)信息可以通過window.orientation訪問到

orientation屬性

它有三個值：0,90，-90

0為豎屏模式（portrait），-90意味著該設(shè)備橫向旋轉(zhuǎn)到右側(cè)的橫屏模式（landscape），而90表示該設(shè)備是橫向旋轉(zhuǎn)到左邊的橫屏模式（landscape）。

還有一個是180，表示豎屏但是是翻轉(zhuǎn)過來的豎屏模式。但這種模式至今尚未得到支持。

如圖所示：

因此，結(jié)合這個orientationChange事件和window的orientation屬性，我們就比較好判斷設(shè)備是處于橫屏還是豎屏了

(function(){

var init = function(){

var updateOrientation = function(){

var orientation = window.orientation;

switch(orientation){

case 90:

case -90:

orientation = 'landscape'; //這里是橫屏

break;

default:

orientation = 'portrait'; //這里是豎屏

break;

}

//html根據(jù)不同的旋轉(zhuǎn)狀態(tài)，加上不同的class，橫屏加上landscape，豎屏

//加上portrait

document.body.parentNode.setAttribute('class',orientation);

};

// 每次旋轉(zhuǎn)，調(diào)用這個事件。

window.addEventListener('orientationchange',updateOrientation,false);

// 事件的初始化

updateOrientation();

};

window.addEventListener('DOMContentLoaded',init,false);

})();

因此可以根據(jù)不同的旋轉(zhuǎn)狀態(tài)加上class，所以我們的css就可以這樣寫了

/**豎屏 body顯示紅色**/

.portrait body div{

background: red;

}

/**橫屏 body顯示藍色**/

.landscape body div{

background: blue;

}

另外一種寫法是,借助 media queries

@media all and (orientation: portrait) {

body div {background: red;} 

}

@media all and (orientation: landscape) { 

body div {background: blue; } 

}

這個orientation media query 在ios3.2+和安卓2.0+上還有其他瀏覽器上有效。

相對來說，這種代碼更加的簡潔一點。跟上面的js+css，這種代碼是純css。當設(shè)備旋轉(zhuǎn)的時候，就會根據(jù)設(shè)備旋轉(zhuǎn)的方向來調(diào)用改方向的css

兼容性

有些設(shè)備并沒有提供orientationchange事件，但不觸發(fā)窗口的resize事件。并且media queries也不支持的情況下，我們該怎么辦呢？

可以用resize事件來判斷。用innerWidth ， innerHeight，可以檢索得到屏幕大小。依據(jù)寬和高的大小比較判斷，寬小于高為豎屏，寬大與高就是橫屏。

代碼如下:

(function(){

var updateOrientation = function(){

var orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';

document.body.parentNode.setAttribute('class',orientation);

};

var init = function(){

updateOrientation();

//監(jiān)聽resize事件

window.addEventListener('resize',updateOrientation,false);

};

window.addEventListener('DOMContentLoaded',init,false);

})();

這樣，我們就可以在瀏覽器中看到屏幕旋轉(zhuǎn)帶來樣式的變化了。

兩種檢測方法的結(jié)合，代碼如下：

(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);

})();

利用這個方法，就可以解決掉煩人的移動端設(shè)備橫豎屏的檢測了。