移动端让页面强制横屏

一般的手机游戏都是采用横屏的设计，视角更宽，游戏体验更好。

最近公司在做一个类似天天酷跑的跑酷类游戏，就需要做横屏。试想一下，当用户打开你的游戏地址，你提示用户要开启手机里的横屏模式才能玩，这时候用户早就不耐烦的把你的游戏关掉了。

那么唯一能想到的解决办法就是强制横屏。

1、设计思路：在竖屏状态下默认是横屏显示的，当用户手动开启了横屏模式，页面的横屏模式自动转换过来，也是横屏显示的

2、实现：

（1）首先是meta标签

为了让页面显示更适应手机屏幕，我们需要让页面的宽度适配手机屏幕的宽度，并且禁用用户缩放界面

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

（2）然后是html结构

这里只做测试，所以这里只放了简单的代码结构

<body>
    Loading
</body>

为了增强效果，再在页面的四个边边角角添加四个横线

<body>
    Loading
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

（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%);
            }
        }

还有边边角角的样式

/*测试 边边角角*/

        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;
        }

（4）js代码

通过html初始化的宽高来确定body的宽高

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

3、全部代码

<!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>

移动端让页面强制横屏

猜你喜欢