Vue 之 Vue Cli Html 移动端的强制横屏功能简单实现

一、简单介绍

二、实现原理

三、注意事项

一、简单介绍

Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍，Vue Cli Html 移动端的强制横屏功能简单实现，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

实现竖屏横显示，关键用到了css3的旋转功能，就是对屏幕 resize 事件进行监听，当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度即可，并在在mounted生命周期中监听resize事件：window.addEventListener('resize', this.xxxxxx)，这样大概即可实现强制横屏效果了。

二、实现原理

1、style 中设置竖屏时的屏幕处理 @media screen and (orientation:portrait)

@media screen and (orientation: portrait) {
  /*竖屏样式*/
  body {
    transform-origin: 0 0;
    transform: rotateZ(90deg) translateY(-100%);
  }
}

2、在页面加载的时候，进行必要的页面宽高处理

    forceLandscapeScreenHandle() {
      const body = document.getElementsByTagName('body')[0];
      const html = document.getElementsByTagName('html')[0];
      const width = html.clientWidth;
      const height = html.clientHeight;
      const max = width > height ? width : height;
      const min = width > height ? height : width;
      body.style.width = max + "px";
      body.style.height = min + "px";
    }

三、注意事项

1、添加窗口变化的重新宽高处理

onWindowSizeChanged() {
      window.addEventListener("resize", this.forceLandscapeScreen)
    }

2、为了页面的变化太多，可以设置屏幕的最大最小比例

<!--      这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面-->
<!--      目的是 让界面显示 更加适应 手机屏幕-->
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

四、效果预览

五、实现步骤

这里构建 Vue 工程，可参见

Web 前端之 Vue vue cli 环境的搭建简单整理（简单的一些注意事项）_仙魁XAN的博客-CSDN博客

1、打开 Vue 工程，在 public/index.html 中添加如下 meta 标签处理，屏幕比例的限制处理

<!--      这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面-->
<!--      目的是 让界面显示 更加适应 手机屏幕-->
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2、在 src/App.vue 中添加测试的内容

3、添加 style 样式，关键处理竖屏时的页面，相关如下

4、在页面加载进行宽高处理

5、最后运行工程，效果如下

六、关键代码

1、public/Index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--      这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面-->
<!--      目的是 让界面显示 更加适应 手机屏幕-->
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2、src/App.vue

<template>
  <div id="container">
    TestForceLandscapeScreen
  </div>
</template>

<script>


export default {
  name: 'ThreeTest',
  components: {},

  data() {
    return {}
  },

  mounted() {

    this.init();

  },
  methods: {

    init() {
      this.forceLandscapeScreenHandle();

      // 这里监控
      this.onWindowSizeChanged();
    },

    forceLandscapeScreenHandle() {
      const body = document.getElementsByTagName('body')[0];
      const html = document.getElementsByTagName('html')[0];
      const width = html.clientWidth;
      const height = html.clientHeight;
      const max = width > height ? width : height;
      const min = width > height ? height : width;
      body.style.width = max + "px";
      body.style.height = min + "px";
    },

    onWindowSizeChanged() {
      window.addEventListener("resize", this.forceLandscapeScreen)
    }
  },

  // beforeDestroy 废弃，使用 beforeUnmount
  beforeUnmount() {

  }
}

</script>

<style>
#app {
  /*文字居中*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}

* {
  /*初始化样式*/
  margin: 0;
  padding: 0;
}

html {
  /*用于 获取 屏幕的可视宽高*/
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

}

@media screen and (orientation: portrait) {
  /*竖屏样式*/
  body {
    transform-origin: 0 0;
    transform: rotateZ(90deg) translateY(-100%);
  }
}


</style>

七、其他

1、参考博文

1）移动端如何让页面强制横屏_Fizz_kai的博客-CSDN博客_html 强制横屏

2）h5横屏（以vue为例） - 江峰★ - 博客园

2、其他实现强制横屏参考

强制横屏展示，这里用到了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了

　　tips:最近又重新研究了一下横屏这个，发现其实不管ios用户是否开启了屏幕固定或者android用户是否开启了屏幕自动旋转，，都不需要使用css判断横竖屏来写两套样式了，只需要以正常情况(即竖屏下)的宽度来计算，然后使用vmin作为单位即可，这样写一套样式就全部搞定了。（vmin是相对于视口的宽度或高度中较小的那个来计算的）