H5页横屏VUE项目bug处理

this.hengping = false      this.shuping = true      window.addEventListener('orientationchange', function(event){        /*竖屏*/        if ( window.orientation == 180 || window.orientation==0 ) {          _this.hengping = false          _this.shuping = true        }        /*横屏*/        if( window.orientation == 90 || window.orientation == -90 ) {          _this.hengping = true          _this.shuping = false        }      });

在vue中，判断处理可以放在app.vue中，因为router-view就在这个层中，可以给router-view添加状态并且有一个同级的横屏块就可以了

html如下

    <div id="hengping" v-show="hengping">      <div class="imgbox">        <img src="./assets/phone.gif" height="100" width="95"/>        <div>为了更好的体验，请竖屏使用系统</div>      </div>    </div>    <view-box v-show="shuping">

CSS:

#hengping{  position: fixed;  top: 0;  right: 0;  bottom: 0;  left:0;  background-color: #313131;    .imgbox{      display: inline-block;      width:300px;      height:180px;      position: absolute;      text-align: center;      top: 0;      right: 0;      bottom: 0;      left:0;      margin: auto;    >div{           margin-top: 30px;           color: #e5e5e5;         }    }}

要点如下： ====》》》》

1。横屏的div要用v-if ，因为固定定位如果用v-show可能会导致竖屏后还会有残余。
2。竖屏部分必须用v-show，因为如果是if router块会由竖屏转横屏的时候有css残留，虽然转为横屏了，他会把竖屏时候得宽高转到横屏去，再进行if处理，于此同时横屏时候的高度也会带给router这块。
当再次转回竖屏的时候，他的宽没问题，高度用的是横屏时候得高度。所以会有router裁剪。
如果用v-show router块 他就像不做处理一样。页面正常横屏全屏占满。只不过页面有结构，不展示出来而已。只展示横屏提示，但再次竖屏，效果就想不添加横屏提示一样完美。