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

標籤：

最近做的網站是既要電腦各個瀏覽器能訪問，ipad又要能訪問，ipad又分幾種，又有橫豎屏區別，需要考慮的東西還是很多。下面是一些區分橫豎屏的代碼。

方法一：用觸發手機的橫屏和豎屏之間的切換的事件

 

window.addEventListener("orientationchange", function() {    // 宣布新方向的數值    alert(window.orientation);    }, false); 

　　

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

 

 

/* portrait */    @media screen and (orientation:portrait) {    /* portrait-specific styles */    }    /* landscape */    @media screen and (orientation:landscape) {    /* landscape-specific styles */    }  

　　

 

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="改變到水平方向";// 改變到水平方向}});

　　

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