h5横屏（以vue为例）

Posted 2020-11-25 jf-67

　　最近在做的一个项目是关于h5横屏的。刚开始听到这个需求我是一脸的懵逼，因为从未接触过横屏，也没有看到h5横屏的项目。当时还问了公司另外一位前端小哥，他说他也没做过，不太清楚。。没办法，领导需求就是这样的，只能硬着头皮上了。。　　

　　回到自己的工位后，开始各种查资料。。然而关于横屏的确实很少。这里找到一篇关于横屏的。中间有些东西还不错，我拿来借用一下，附上原文链接：h5开发：横屏适配。

　　强制横屏展示，这里用到了css3的旋转功能，就是对屏幕 resize 事件进行监听，当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度即可。代码如下：

　　在mounted生命周期中监听resize事件：window.addEventListener(‘resize‘, this.resize)

　　resize方法如下：　

resize () {
      var width = window.innerWidth,
          height = window.innerHeight,
          $wrapper = document.getElementById("app"),
          style = "";
      if (width >= height) { // 横屏
        style += "width:" + width + "px;";  // 注意旋转后的宽高切换
        style += "height:" + height + "px;";
        style += "-webkit-transform: rotate(0); transform: rotate(0);";
        style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      }
      else { // 竖屏 
        style += "width:" + height + "px;";
        style += "height:" + width + "px;";
        style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
        // 注意旋转中点的处理
        style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      }
      $wrapper.style.cssText = style;
    }

　　好了。到这里已经完成了一小步了。接下来就是适配的问题了。我采用的是vw跟vh。以前没用过，初次接触，用过之后感觉真的挺好用的。

　　假如ios用户开启了屏幕固定或者android用户开启了屏幕自动旋转。这两种情况下，会有一点不一样。这时候使用css判断横竖屏就显得尤其重要了。代码如下：　

/* 竖屏 */
@media screen and (orientation:portrait) {
    // 以vw为单位
}

/* 横屏 */
@media screen and (orientation:landscape) {
　　// 以vh为单位
}

　　在竖屏的时候使用vw来进行适配。即根据屏幕的宽度来适配。这里以375 x 667的设计稿为例。例如：一个元素宽为526，高为314。根据屏幕的宽度来适配的话就是526/375 * 100% vw、314/375 * 100% vw了。

　　如果是横屏的话，就是用vh来进行适配。即根据屏幕的高度来适配。同样以375*667的设计稿为例。此时元素宽为526，高为314。就该写成宽为526/375 * 100% vh、高为314/375 * 100% vh了