h5移动端页面强制横屏

说明:这个的原文章来自于https://www.jianshu.com/p/9c3264f4a405 ,我做点点补充 ,谢谢原链接的小姐姐

最近公司是要我做一个h5的小视频,因为是视频接视频,并且源文件就是横屏的,所以要求点击网址一进入就是横屏的状态。。。。。

<body style="margin: 0px;height: 100%;padding: 0;" class="webpBack">
    <span  id="print" >
      <span id="changeIt">
         啦啦啦
      </span>
    </span> 
</body>

下面的代码要注意啦~~~~注意点:因为你在自己的代码上去套这个样式,你可以在竖屏的情况下设一个颜色 ,横屏的时候设另外一个颜色,在这两种状态下去调css,还有我当初习惯了写行内样式,半天出不来~~~~所以最好用class。。。。

    /* 竖屏 */
     @media screen and (orientation: portrait) {
        html{
           width : 100% ;
           height : 100% ;
            overflow : hidden;
            /* background-color:yellow; */
        }
        body{
            width : 100% ;
           height : 100% ;
          overflow : hidden;
        }
        #print{
           position : absolute ;
    
        }
        .enterDiv{
            height: 100%;
             100%;
            position: relative;
            left: 0;
        }
   }
   /* 横屏 */
   @media screen and (orientation: landscape) {
          html{
             width : 100% ;
             height : 100% ;
             /* background-color:red; */
          } 
           body{
              width : 100% ;
             height : 100% ;
          }
          #print{
            position : absolute ;
            top : 0 ; 
            left : 0 ;
            width : 100% ;
            height : 100% ;
         }
        .backgroundEnter{
             100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    #print span{
      margin: auto ;
      margin-top : 20px ;
      text-align: center;
    }

　横屏的js

下面要注意的是:刚开始我的苹果6s打死都不起作用,但是别人的6s可以,大部分的安卓机起作用,我的6s出现的状况是第一次竖屏是正常的,进入横屏状态也是正常的，当我回来到竖屏的时候,就不行了,为什么?下面的if-else的判断，else里面死都进不去,我都想重写全部的css了,我也怀疑过是不是document.documentElement.clientWidth;是不是不适合去获取宽高,并不是,而是在转屏的时候,手机需要切换结束后获取到的宽高才是正确的,所以监听的里面我们做一个0.5秒的延迟就可以了 ........

<script>
    // 试试横屏
    let width = document.documentElement.clientWidth;
    let height = document.documentElement.clientHeight;
    if (width < height) {
        console.log(width + "哈哈哈 " + height);
        $print = $('#print');
        $print.width(height);
        $print.height(width);
        $print.css('top', (height - width) / 2);
        $print.css('left', 0 - (height - width) / 2);
        $print.css('transform', 'rotate(90deg)');
        $print.css('transform-origin', '50% 50%');
    }
    var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    console.log(evt, 'evt')
    window.addEventListener(evt, function() {
        // window.localtion.reload();
       setTimeout(function(){
        var width =document.documentElement.clientWidth; 
        var height = document.documentElement.clientHeight;

        $print = $('#print');
        $videoIntroduce=$('#videoIntroduce')
        $toVideoBack=$('#toVideoBack')
        $backgroundImg=$('.backgroundImg')
        if (width > height) {

  $print.width(width);
  $print.height(height);
  $print.css('top', '0');
  $print.css('left', 0);
  $print.css('transform', 'none');
 $print.css('transform-origin', '50% 50%');

} else{ $print.width(height); $print.height(width); $print.css('top', (height - width) / 2); $print.css('left', 0 - (height - width) / 2); $print.css('transform', 'rotate(90deg)'); $print.css('transform-origin', '50% 50%'); } }, 500) }, false);

　之前有看到评论说做延迟,但是不知道出现什么样的情况去做,也不知道为什么,错过就知道了