H5横屏开发、vue横屏开发@令狐张豪

令狐张豪

已于 2022-03-08 11:49:07 修改

阅读量1.2k

点赞数

分类专栏： css js vue 文章标签： javascript html vue H5 前端

于 2022-03-08 11:30:06 首次发布

本文链接：https://blog.csdn.net/LingHuzh/article/details/123349279

版权

vue 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

有时候正常竖屏开发满足不了我们的需求，需横屏开发

开发思路：把这个body利用css3 transform rotate 旋转90度，js判断竖屏情况下的宽高和横屏下的宽高

示例：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html {
        /*用于 获取 屏幕的可视宽高*/
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    body {
        /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
    }
    
    @media screen and (orientation:portrait) {
        /*竖屏样式*/
        body {
            transform-origin: 0 0;
            transform: rotateZ(90deg) translateY(-100%);
        }
    }
	.box{
		width: 100%;
		height: 100px;
		background: #009F95;
	}
</style>

<body>
   <div class="box">
	   内容区
   </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>

</html>

</html>

效果图：

在这里插入图片描述

注意点：

因为横屏开发我们肯定是按照横屏的设计图尺寸来进行开发的，我们实际上是没有旋转手机而是把整个body进行旋转了90度，让 body 初始 width 和 height 就等于页面可视区域的宽高。如果用户手机开启了屏幕旋转那么用户在转动手机后我们的body宽高就发生了改变，与横屏设计图开发出来的效果肯定不适配了。
解决方案：