js／css 检测移动设备方向的变化 判断横竖屏幕

最近做的站点是既要电脑各个浏览器能访问，ipad又要能访问，ipad又分几种，又有横竖屏区别，需要考虑的东西还是很多。下面是一些区分横竖屏的代码。

方法一：用触发手机的横屏和竖屏之间的切换的事件

 

?

1 2 3 4 5 6 7

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

　　

// 方法二：监听调整大小的改变

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

　　

 

css判断横竖屏幕

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

　　

 

 

本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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