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

最新推荐文章于 2024-03-07 23:46:28 发布

az44yao

最新推荐文章于 2024-03-07 23:46:28 发布

阅读量4k

点赞数

文章标签： html css javascript

原文链接：https://blog.csdn.net/gysea123321/article/details/117326604

版权

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

需求
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>

az44yao

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
移动端如何让页面强制横屏

近想做一个手机游戏页面，所以就先攻克手机横屏的难关。需求1. 在竖屏条件下默认是横屏显示的。2. 即使用户开了横屏模式，界面的横屏模式自动转换过来。实现1.html 结构这里就简单放一个文字，作为测试的元素<body> Loading</body>2.meta 标签这里的作用是让页面的宽度适配手机屏幕的宽度，这样写就能使 html 的 width 等于对应手机屏幕的宽度。另外还阻止用户缩放界..
复制链接

扫一扫