移动端判断是否处于横屏还是竖屏状态

1. style>  
2.     @media screen and (orientation:portrait) {  
3.         /* portrait-specific styles */  
4.     }  
5.     /* landscape */  
6.     @media screen and (orientation:landscape) {  
7.         /* landscape-specific styles */  
8.     }  
9. </style>  

 

[html] view plain copy

 

 

1. <script type="text/javascript">  
2.     var mql = window.matchMedia("(orientation: portrait)");  
3.     if(mql.matches) {  
4.         alert("竖屏");  
5.     } else {  
6.         alert("横屏");  
7.     }  
8.     // 添加一个媒体查询改变监听者  
9.     mql.addListener(function(m) {  
10.         if(m.matches) {  
11.             alert("竖屏");  
12.         }  
13.         else {  
14.             alert("横屏");  
15.         }  
16.     });  
17. </script>