手机屏幕检测

最新推荐文章于 2021-09-05 17:00:06 发布

chenjungang0115

最新推荐文章于 2021-09-05 17:00:06 发布

阅读量400

点赞数

原文链接：https://my.oschina.net/newSpring/blog/742211

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
       <title></title>
       <style type="text/css">
           #div1{
               width: 300px;
               height: 300px;
               background: red;
               font-size: 50px;
           }
       </style>
   </head>
   <body>
       <div id="div1">

       </div>
   </body>
   <script type="text/javascript">
       var div1 = document.getElementById("div1");
       //onorientationchange 手机屏幕旋转检测
       window.onorientationchange = function(){
           //window.orientation 0(竖屏) 、90(左横屏) 、-90(右横屏) 、180(倒屏)
           switch(window.orientation){
               case 0:
                   div1.innerHTML = '竖屏';
                   break;
               case 90:
                   div1.innerHTML = '左横屏';
                   break;
               case -90:
                   div1.innerHTML = '右横屏';
                   break;
               case 180:
                   div1.innerHTML = '倒屏';
                   break;
           }
       }
   </script>
</html>