這篇文章主要介紹了JS檢測移動(dòng)端橫豎屏的代碼,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
使用media來判斷屏幕寬度遇到的問題：
ios上當(dāng)我旋轉(zhuǎn)屏幕的時(shí)候可行，但是安卓機(jī)上沒反應(yīng)，橫屏顯示的還是我豎屏的樣式。
查了一下資料，css3的media如果要在移動(dòng)端有較好的顯示效果，需要在頁頭加上這段代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
可是這段代碼我不能用。因?yàn)槲业捻撁媸亲隽诉m配的?？梢愿鶕?jù)屏幕的大小來顯示字號(hào)和樣式的大小。如果我加了這段代碼的話，我的適配就不能用了。所以要用其他方法
解決辦法：
移動(dòng)端的設(shè)備提供了一個(gè)事件：orientationChange事件
這個(gè)事件是蘋果公司為safari中添加的。以便開發(fā)人員能夠確定用戶何時(shí)將設(shè)備由橫向查看切換為縱向查看模式。
在設(shè)備旋轉(zhuǎn)的時(shí)候，會(huì)觸發(fā)這個(gè)事件，
// Listen for orientation changes
window.addEventListener("orientationchange", function() {
// Announce the new orientation number
alert(window.orientation);
}, false);
只要用戶改變了設(shè)備的查看模式，就會(huì)觸發(fā) orientationChange事件。此時(shí)的event對(duì)象不包含任何有價(jià)值的信息，
因?yàn)槲ㄒ幌嚓P(guān)信息可以通過window.orientation訪問到
orientation屬性
它有三個(gè)值：0,90，-90
0為豎屏模式（portrait），-90意味著該設(shè)備橫向旋轉(zhuǎn)到右側(cè)的橫屏模式（landscape），而90表示該設(shè)備是橫向旋轉(zhuǎn)到左邊的橫屏模式（landscape）。
還有一個(gè)是180，表示豎屏但是是翻轉(zhuǎn)過來的豎屏模式。但這種模式至今尚未得到支持。
如圖所示：
因此，結(jié)合這個(gè)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)用這個(gè)事件。
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顯示藍(lán)色**/
.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; }
}
這個(gè)orientation media query 在ios3.2+和安卓2.0+上還有其他瀏覽器上有效。
相對(duì)來說，這種代碼更加的簡潔一點(diǎn)。跟上面的js+css，這種代碼是純css。當(dāng)設(shè)備旋轉(zhuǎn)的時(shí)候，就會(huì)根據(jù)設(shè)備旋轉(zhuǎn)的方向來調(diào)用改方向的css
兼容性
有些設(shè)備并沒有提供orientationchange事件，但不觸發(fā)窗口的resize事件。并且media queries也不支持的情況下，我們?cè)撛趺崔k呢？
可以用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);
})();
利用這個(gè)方法，就可以解決掉煩人的移動(dòng)端設(shè)備橫豎屏的檢測了。