h5横屏(以vue为例)

  最近在做的一个项目是关于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 + "px;";  // 注意旋转后的宽高切换
        style += "height:" + height + "px;";
        style += "-webkit-transform: rotate0); transform: rotate0);";
        style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      }
      else { // 竖屏 
        style += "" + height + "px;";
        style += "height:" + width + "px;";
        style += "-webkit-transform: rotate90deg); transform: rotate90deg);";
        // 注意旋转中点的处理
        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了

  

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注