移动端横屏判断

运用场景：检查用户的手机，当用户手机横屏的时候，进行弹窗提示，禁止点击

实现方法：

在入口文件index.html或者main.js进行代码判断，这样可以确保每个页面都可以被检测到，但是要全局添加遮罩层，可以通过入口文件index.js进行添加

通过index.html的

    <style>
      .pop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        z-index: 8888;
      }
      .pop span {
        position: absolute;
        width: 100%;
        left: 50%;
        top: 50%;
        margin: auto;
        color: #fff;
        font-size: 32px;
        text-align: center;
        transform: translate(-50%,-50%);
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <div class="pop" id="pop" style="display: none;"><span>为了您更好的体验，请将手机调整至竖屏！</span></div>
    <!-- built files will be auto injected -->
  </body>

  <script>
    // 旋转移动设备的时候进行横屏提示
    window.onorientationchange=function(){
      if(window.orientation==90||window.orientation==-90){
        document.getElementById("pop").style.display = 'block';
      }else{
        document.getElementById("pop").style.display = 'none';
      }
    }

    // 刷新的时候进行判断
    if(window.orientation==90||window.orientation==-90){
      document.getElementById("pop").style.display = 'block';
    }else{
      document.getElementById("pop").style.display = 'none';
    }

  </script>

扫描二维码关注公众号，回复： 6818115 查看本文章

如果只是弹窗提示，可以在main.js上进行检测判断

// // 横屏提示
 window.addEventListener(
   'onorientationchange' in window ? 'orientationchange' : 'resize',
   function () {
     if (window.orientation === 90 || window.orientation === -90) {
       // Vue.$vux.toast.text('横屏可能导致页面异常，建议竖屏操作！', 'middle')
       Vue.$vux.alert.show({
        title: '',
         content: '为了您更好的体验，<br/>请将手机调整至竖屏！'
       })
     }
     // window.location.reload();
  }, false)

猜你喜欢