JS横竖屏检测

第一种方案：

<!Doctype html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> 
 <title>横竖屏切换检测</title> 
 <style type="text/css"> 
  .landscape body { 
  background-color:red; 
  } 

  .portrait body { 
  background-color: blue; 
  } 
 </style> 
 </head> 
 <body orient="landspace"> 
 <div> 
  内容 
 </div> 
 <script type="text/javascript"> 
  (function(){
    var supportsOrientation = (typeof window.orientation == 'number' && typeof window.onorientationchange == 'object');

    var HTMLNode = document.body.parentNode;
    var updateOrientation = function() {
      // rewrite the function depending on what's supported
      if(supportsOrientation) {
        updateOrientation = function() {
          var orientation = window.orientation;
          console.log(orientation)

          switch(orientation) {
            case 90: case -90:
              orientation = 'landscape';
            break;
            default:
              orientation = 'portrait';
          }

          // set the class on the HTML element (i.e. )
          HTMLNode.setAttribute('class', orientation);
        }
      } else {
        updateOrientation = function() {
          // landscape when width is biggest, otherwise portrait
          var orientation = (window.innerWidth > window.innerHeight) ? 'landscape': 'portrait';

          // set the class on the HTML element (i.e. )
          HTMLNode.setAttribute('class', orientation);
        }
      }

      updateOrientation();
    }
    var init = function() {
      // initialize the orientation
      updateOrientation();

      if(supportsOrientation) {
        window.addEventListener('orientationchange', updateOrientation, false);
      } else {
        // fallback: update every 5 seconds
        setInterval(updateOrientation, 100);
      }

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

第二种方案：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
     <style>
        .landscape{
            width: 100%;
            height: 100%;
            background: red;
        }
            .portrait{
            width: 100%;
            height: 100%;
            background: blue;
        }
     </style>
    <body>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
        <script>
            function orient() {
                if(window.orientation == 90 || window.orientation == -90) {
                    //ipad、iphone竖屏；Andriod横屏
                    $("body").attr("class", "landscape");
                    orientation = 'landscape';
                    alert(111111111)
                    return false;
                } else if(window.orientation == 0 || window.orientation == 180) {
                    //ipad、iphone横屏；Andriod竖屏
                    $("body").attr("class", "portrait");
                    orientation = 'portrait';
                    alert(2222222222)
                    return false;
                }
            }
            //页面加载时调用
            $(function() {

                orient();

            });
            //用户变化屏幕方向时调用
            $(window).bind('orientationchange', function(e) {

                orient();
            });
        </script>
    </body>

</html>

猜你喜欢