js和css實現檢測行動裝置方向的變化並判斷橫豎屏

標籤：

方法一：

本地的window.matchMedia方法允許即時媒體查詢。

代碼如下:

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

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

　　if(mql.matches) {// 直立方向

　　　　alert("1")

　　} else {//水平方向

　　　　alert("2")

　　}

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

　　mql.addListener(function(m) {

　　　　if(m.matches) {

　　　　// 改變到直立方向

　　　　　　console.log("改變到直立方向");

　　　　}

　　　　else {// 改變到水平方向

　　　　　　console.log("改變到水平方向");

　　　　}

　　});

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

　　 代碼如下:

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

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

　　}, false);

 

 

方法三：jquerymobile架構下使用

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 */

　　}

　　

js和css實現檢測行動裝置方向的變化並判斷橫豎屏