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

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

需求

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


<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Demotitle>
  <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>

你可能感兴趣的:(移动端)