需求

  • 在竖屏 条件 下默认是 横屏显示的。
  • 即使用户 开了 横屏模式，界面的 横屏模式 自动转换 过来。

实现

1. meta 标签

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

2. CSS

  • 关于横屏的 样式 就主要是 利用 transform 的 旋转 和 平移 来改变 竖屏样式。
  • 对于横屏的 样式 就保持不变
  • 对于 body 在 屏幕转换 时，宽高的 改变，就用 JS 来控制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
* {
  /*初始化样式*/
  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%;

  /*用于 测试的 样式*/
  background-color: #444;
  color: #FFF;
  letter-spacing: 4px;
  font-size: 28px;
  /*文字居中*/
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (orientation:portrait) {
  /*竖屏样式*/
  body {
    transform-origin: 0 0;
    transform: rotateZ(90deg) translateY(-100%);
  }
}

3. JS

  • 通过 html 初始化的 宽高 来确定 body 的宽高
1
2
3
4
5
6
7
8
9
10
11
12
function resize() {
    var body = document.getElementsByTagName('body')[0];
    var html = document.getElementsByTagName('html')[0];
    var width = html.clientWidth;
    var height =  html.clientHeight;
    var max = width > height ? width : height;
    var min = width > height ? height : width;
    body.style.width = max + "px";
    body.style.height = min + "px";
  }
  resize();
  window.addEventListener("resize", resize)