js检测移动端横竖屏

参考：
https://www.cnblogs.com/xianyulaodi/p/5533185.html

方法一：横屏或者竖屏给html添加不同的class名。修改div的颜色(样式)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    /**竖屏 body显示红色**/
    .portrait body div{
        background: red;
    }
    /**横屏 body显示蓝色**/
    .landscape body div{
    background: blue;
    }
    div{width: 100px;height: 100px;}
    </style>
</head>
<body>
    <div class="orientation"></div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
    (function(){
        var init = function(){
            var updateOrientation = function(){
                var orientation = window.orientation;
                switch(orientation){
                    case 90:
                    case -90:
                        orientation = 'landscape'; //这里是横屏
                        break;
                    default:
                        orientation = 'portrait';  //这里是竖屏
                        break;
                }

                //html根据不同的旋转状态，加上不同的class，横屏加上landscape，竖屏
                //加上portrait
                document.body.parentNode.setAttribute('class',orientation);
            };

            // 每次旋转，调用这个事件。
            window.addEventListener('orientationchange',updateOrientation,false);

            // 事件的初始化
            updateOrientation();
        };

        window.addEventListener('DOMContentLoaded',init,false);
    })();
    </script>
</body>
</html>

在这里插入图片描述

方法二：横屏或者竖屏给html添加不同的class名。修改div的颜色(样式)【与方法一的区别，css写法】

@media all and (orientation: portrait) {
   body div {background: red;} 
}

@media all and (orientation: landscape) { 
   body div {background: blue; } 
}
div{width: 100px;height: 100px;}

方法三：兼容性
有些设备并没有提供orientationchange事件，但不触发窗口的resize事件。并且media queries也不支持的情况下，我们该怎么办呢？
可以用resize事件来判断。用innerWidth ， innerHeight，可以检索得到屏幕大小。依据宽和高的大小比较判断，宽小于高为竖屏，宽大与高就是横屏。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    @media all and (orientation: portrait) {
        body div {background: red;} 
    }

    @media all and (orientation: landscape) { 
        body div {background: blue; } 
    }
    div{width: 100px;height: 100px;}
    </style>
</head>
<body>
    <div class="orientation"></div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
    (function(){
        var updateOrientation = function(){
            var orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
            document.body.parentNode.setAttribute('class',orientation);
        };

        var init = function(){
            updateOrientation();
            //监听resize事件
            window.addEventListener('resize',updateOrientation,false);
        };

        window.addEventListener('DOMContentLoaded',init,false);
    })();
    </script>
</body>
</html>

方法四：两种检测方法的结合，代码如下：

(function(){
   var supportOrientation = (typeof window.orientation === 'number' &&
           typeof window.onorientationchange === 'object');

   var init = function(){
       var htmlNode = document.body.parentNode,
           orientation;
       var updateOrientation = function(){
           if(supportOrientation){
               orientation = window.orientation;
               switch(orientation){
                   case 90:
                   case -90:
                       orientation = 'landscape';
                       break;
                   default:
                       orientation = 'portrait';
                       break;
               }
           }else{
               orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
           }
           htmlNode.setAttribute('class',orientation);
       };

       if(supportOrientation){
           window.addEventListener('orientationchange',updateOrientation,false);
       }else{
           //监听resize事件
           window.addEventListener('resize',updateOrientation,false);
       }

       updateOrientation();
   };

   window.addEventListener('DOMContentLoaded',init,false);
})();

方法五：简单写法

window.onorientationchange=function(){
     if(window.orientation==90||window.orientation==-90){
         alert('横屏了');
     }else{
         alert('没有横屏');
     }
 }

js检测移动端横竖屏

猜你喜欢