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

　　}

　　

转载于:https://www.cnblogs.com/sandy-happyhour/p/4757014.html