JS和css實作偵測行動裝置方向的變化並判斷橫豎螢幕_javascript技巧

方法一：用觸發手機的橫屏與垂直螢幕之間的切換的事件

複製程式碼 程式碼如下:

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

// 宣告新方向的數值

alert(window.orientation);

}, false);

方法二：監聽調整大小的改變

複製程式碼 程式碼如下:

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

// 得到螢幕尺寸 (內部/外部寬度，內部/外部高度) 

}, false);

 

css判斷橫豎螢幕

複製程式碼 程式碼如下:

/* portrait */

@media screen and (orientation:portrait) {

/* portrait-specific styles */

}

/* landscape */

@media screen and (orientation:landscape) {

/* landscape-specific styles */

}

本地window.matchMedia方法允許即時媒體查詢。我們可以利用以上媒體查詢找到我們是處於直立或水平視角：

複製程式碼 程式碼如下:

var mql = window.matchMedia("(orientation: portrait)");

// 如果有匹配，則我們處於垂直視角

if(mql.matches) { 

// 直立方向

alert("1")

} else { 

//水平方向

alert("2")

} 

// 增加一個媒體查詢改變監聽者

mql.addListener(function(m) {

if(m.matches) {

// 改變到直立方向

document.getElementById("test").innerHTML="改變到直立方向";

}

else {

document.getElementById("test").innerHTML="改變到水平方向";

// 改變到水平方向

}

});