移动端横屏/强制横屏

原创已于 2023-04-24 14:46:02 修改 · 2.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

于 2023-04-15 14:57:53 首次发布

文章介绍了如何使用CSS和JavaScript来检测并响应设备的横屏和竖屏状态。通过媒体查询定义不同屏幕方向的样式，结合JavaScript监听`orientationchange`事件，动态调整页面布局。同时，文中还提到了强制横屏的实现方法，通过改变元素尺寸和应用CSS变换实现页面旋转。

整体演示：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 竖屏样式 */

@media all and (orientation: portrait) {

body div {

width: 200px;

height: 500px;

background-color: pink;

}

/* 横屏样式 */

@media all and (orientation: landscape) {

body div {

width: 500px;

height: 200px;

background-color: orangered;

}

</style>

</head>

<body>

<div >这个是大屏幕</div>

</body>

</html>

console.log('window:',window.orientation);

console.log('window:',window.orientationchange);

window.addEventListener("onorientationchange"in window ? "orientationchange": "resize", function() {

//判断window.orientation === 180||===0代表竖屏

if (window.orientation === 180 ||window.orientation=== 0){

console.log('竖屏状态！');

//竖屏情况下删除横屏样式

document.body.classList.remove("landscape");

};

//判断window.orientation === 90||===-90代表横屏

if (window.orientation === 90 ||window.orientation=== -90){

console.log('横屏状态！');

//竖屏情况下添加横屏样式

document.body.classList.add("landscape");

}

}, false);

// window.addEventListener("orientationchange", function () {

// if (window.orientation === 90 || window.orientation === -90) {

// console.log('横屏状态！');

// document.body.classList.add("landscape");

// } else {

// console.log('竖屏状态！');

// document.body.classList.remove("landscape");

// }

// });

</script>

---------------------------------------------------------------------------------------------------------------------------

可以使用JavaScript的`window.orientation`属性来判断当前屏幕的方向，其中0表示竖屏，90表示向左横屏，-90表示向右横屏。根据不同的方向，可以动态地修改CSS样式，以实现不同的布局效果。具体实现步骤如下：
1. 在CSS中定义针对横屏的样式，例如：
```
@media screen and (orientation: landscape) {
/* 横屏样式 */
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
```
2. 在JavaScript中监听`window.orientation`属性的变化，根据不同的值来添加或移除对应的CSS类，例如：
```
window.addEventListener("orientationchange", function() {
if (window.orientation === 90 || window.orientation === -90) {
document.body.classList.add("landscape");
} else {
document.body.classList.remove("landscape");
}
});
```
在以上代码中，当屏幕为横屏时，会给`<body>`元素添加`landscape`类，从而触发CSS中定义的横屏样式。当屏幕为竖屏时，则会移除该类，恢复默认样式。
需要注意的是，由于不同浏览器对`orientationchange`事件的支持可能不同，因此建议在事件处理函数中加入对`resize`事件的监听，以便在浏览器窗口大小发生变化时也能正确地更新样式。

---------------------------------------------------------------------------------------------------------------------------

强制横屏

<body>
    <div id="app">
        <h1>我是一个测试网页</h1>
    </div>
</body>

<script>
    function crossFun(ele) {
        var width = document.documentElement.clientWidth;
        var height = document.documentElement.clientHeight;
        //第一次进来  判断是不是横屏
        if (width < height) {
            ele.style.width = height + 'px';
            ele.style.height = width + 'px';
            ele.style.top = (height - width) / 2 + 'px';
            ele.style.left = 0 - (height - width) / 2 + 'px';
            ele.style.transform = 'rotate(90deg)';
            ele.style.transformOrign = '50% 50%';
            ele.style.position = 'relative';
        }
        //设备旋转或者窗口变化时候进行  横竖屏处理     在来回切换的时候回出现BUG  使用定时器解决
        var evt = "onorientationchange" in window ? "orientationchange" : "resize";

        window.addEventListener(evt, function () {
            setTimeout(function () {
                var width = document.documentElement.clientWidth;
                var height = document.documentElement.clientHeight;
                if (width > height) {
                    ele.style.width = width + 'px';
                    ele.style.height = height + 'px';
                    ele.style.top = 0;
                    ele.style.left = 0;
                    ele.style.transform = 'none';
                    ele.style.transformOrign = '50% 50%';
                    ele.style.position = 'relative';
                } else {
                    ele.style.width = height + 'px';
                    ele.style.height = width + 'px';
                    ele.style.top = (height - width) / 2 + 'px';
                    ele.style.left = 0 - (height - width) / 2 + 'px';
                    ele.style.transform = 'rotate(90deg)';
                    ele.style.transformOrign = '50% 50%';
                    ele.style.position = 'relative';
                }

            }, 100);

        }, false);
    }
    crossFun(document.getElementById('app')); //注意 方法里面用的是原生的方法  传入的DOM应该用原生的方式获取  或者对原方法进行修改即可　　
</script>

-------------------------------------------------------------------------------------------------------------------------------

html {
							/*用于 获取 屏幕的可视宽高*/
							width: 100%;
							height: 100%;
							overflow: hidden;
						}

						body {
							/*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
							/* position: fixed; */
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
						}

						@media screen and (orientation:portrait) {

							/*竖屏样式*/
							#box {
								transform-origin: 0 0;
								transform: rotateZ(90deg) translateY(-100%);
							}
						}

// 横屏
					(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)
					})();