js detects mobile terminal horizontal and vertical screen

Reference:
https://www.cnblogs.com/xianyulaodi/p/5533185.html

Method 1: Add different class names to html in horizontal or vertical screen. Modify the color (style) of the 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>

Insert picture description here

Method 2: Add different class names to html in horizontal or vertical screen. Modify the color (style) of the div [Difference from method 1, css writing]

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

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

Method 3: Compatibility
Some devices do not provide orientationchange event, but do not trigger window resize event. What should we do if media queries are not supported?
You can use the resize event to judge. With innerWidth and innerHeight, you can retrieve the screen size. According to the comparison of the width and height, the width is smaller than the height for the vertical screen, and the width and height are the horizontal screen.

<!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>

Method 4: Combination of the two detection methods, the code is as follows:

(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);
})();

Method five: simple writing

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

js detects mobile terminal horizontal and vertical screen

Guess you like