移动端如何让页面强制横屏

来源：互联网发布：大数据应用启示录编辑：程序博客网时间：2024/05/17 01:26

最近想做一个手机游戏页面，所以就先攻克手机横屏的难关。

需求

1. 在竖屏条件下默认是横屏显示的。

2. 即使用户开了横屏模式，界面的横屏模式自动转换过来。

实现

1.html 结构

这里就简单放一个文字，作为测试的元素

<body>    Loading</body>

2.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">

3. css代码

关于横屏的样式就主要是利用 transform 的旋转和平移来改变竖屏样式。
对于横屏的样式就保持不变
对于 body 在屏幕转换时，宽高的改变，就用 JS 来控制

* {  /*初始化样式*/  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%);  }}

4. JS 代码

通过 html 初始化的宽高来确定 body 的宽高
目前为止就能够实现移动端强制横屏的要求了。

(function () {  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)})();

另外. 合并后的测试html

<!DOCTYPE html><html lang="zh"><head>  <meta charset="UTF-8">  <title>Demo</title>  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <style type="text/css">    * {      /*初始化样式*/      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%);      }    }    /*测试 边边角角*/    div {      background-color: #F00;      position: fixed;      height: 2px;      width: 100px;    }    div:nth-of-type(1){      top: 0;      left: 0;    }    div:nth-of-type(2){      top: 0;      right: 0;    }    div:nth-of-type(3){      bottom: 0;      left: 0;    }    div:nth-of-type(4){      bottom: 0;      right: 0;    }  </style></head><body>  Loading2  <div></div>  <div></div>  <div></div>  <div></div>  <script>    (function () {      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)    })();  </script></body></html>

阅读全文

1 0

移动端如何让页面强制横屏

需求

1. 在竖屏 条件 下默认是 横屏显示的。

2. 即使用户 开了 横屏模式，界面的 横屏模式 自动转换 过来。

实现

1.html 结构

2.meta 标签

3. css代码

4. JS 代码

另外. 合并后的测试html

1. 在竖屏条件下默认是横屏显示的。

2. 即使用户开了横屏模式，界面的横屏模式自动转换过来。