JS檢測移動端橫豎屏的代碼

更新時間：2016年05月30日 16:11:36 作者：咸魚老弟

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

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

ios上當我旋轉屏幕的時候可行，但是安卓機上沒反應，橫屏顯示的還是我豎屏的樣式。

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

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

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

解決辦法：

移動端的設備提供了一個事件：orientationChange事件

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

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

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
// Announce the new orientation number
alert(window.orientation);
}, false);

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

因為唯一相關信息可以通過window.orientation訪問到

orientation屬性

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

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

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

如圖所示：

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

(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ù)不同的旋轉狀態(tài)，加上不同的class，橫屏加上landscape，豎屏
//加上portrait
document.body.parentNode.setAttribute('class',orientation);
};
// 每次旋轉，調用這個事件。
window.addEventListener('orientationchange',updateOrientation,false);
// 事件的初始化
updateOrientation();
};
window.addEventListener('DOMContentLoaded',init,false);
})();

因此可以根據(jù)不同的旋轉狀態(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。當設備旋轉的時候，就會根據(jù)設備旋轉的方向來調用改方向的css

兼容性

有些設備并沒有提供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);
})();

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

兩種檢測方法的結合，代碼如下：

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

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

您可能感興趣的文章: