css和JS判断手机浏览器是横屏or竖屏

mt

我们在开发时，常会需要判断横屏或竖屏，以适应不同显示，下面提供两种方法，给有需要的人。
1、css判断：
写在同一个CSS中
<style>
@media screen and (orientation: portrait) {
  /*竖屏 css*/
}
@media screen and (orientation: landscape) {
  /*横屏 css*/
}
</style>
分开写在2个CSS中
竖屏：<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
横屏：<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
2、JS判断：

1. //判断手机横竖屏状态：
   
2. function hengshuping() {
   
3.     if (window.orientation == 180 || window.orientation == 0) {
   
4.         alert("竖屏状态！")
   
5.     }
   
6.     if (window.orientation == 90 || window.orientation == -90) {
   
7.         alert("横屏状态！")
   
8.     }
   
9. }
   
10. window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
    
11. 　　

复制代码

jQuery 判断iPad、iPhone、Android是横屏还是竖屏的方法

屏幕方向对应的window.orientation值：

ipad： 90 或 -90 横屏

ipad： 0 或180 竖屏

Andriod：0 或180 横屏

Andriod： 90 或 -90 竖屏

1. function orient() {
   
2.     if (window.orientation == 90 || window.orientation == -90) {
   
3.         //ipad、iphone竖屏；Andriod横屏
   
4.         $("body").attr("class", "landscape");
   
5.         orientation = 'landscape';
   
6.         return false;
   
7.     } else if (window.orientation == 0 || window.orientation == 180) {
   
8.         //ipad、iphone横屏；Andriod竖屏
   
9.         $("body").attr("class", "portrait");
   
10.         orientation = 'portrait';
    
11.         return false;
    
12.     }
    
13. }
    
14. //页面加载时调用
    
15. $(function() {
    
16.     orient();
    
17. });
    
18. //用户变化屏幕方向时调用
    
19. $(window).bind('orientationchange', function(e) {
    
20.     orient();
    
21. });

复制代码