WhatsApp网页版登录

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

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

    
      
         啦啦啦
      
     

下面的代码要注意啦~~~~注意点:因为你在自己的代码上去套这个样式,你可以在竖屏的情况下设一个颜色   ,横屏的时候设另外一个颜色,在这两种状态下去调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%;
            width: 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{
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    #print span{
      margin: auto ;
      margin-top : 20px ;
      text-align: center;
    }

横屏的js

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