在开发网页时,一般情况网页都是在手机端竖屏显示的,只有把手机横过来才会横屏显示(需要开启手机旋转功能)。而我们有时需要强制把网页在手机端横屏显示,如:游戏、视频播放等,也就是说,在手机竖屏时,我们要将这些网页在手机上横屏展示出来。
DEMO: https://lib.im/demo/phone-cross/ 手机端打开会横屏

网页在手机端如何强制横屏展示?

如果想让一个普通网页在手机竖屏的情况,横屏显示,就需要通过代码来实现了。我们只需判断手机当前是否竖屏,如果是竖屏,就旋转网页让网页横屏显示,如果是横屏就不旋转网页。如何判断手机是否竖屏呢?

思路有2个:

1:通过判断手机屏幕宽度来判断手机是否竖屏;

2:通过判断手机旋转的角度来判断手机是否竖屏;

下面,就简单介绍一个小案例:

网页HTML代码:

<div class="lingan_1" id="lingan_1">
<img src="img/1.jpg" width=100% height=400px>
</div>

为人让lingan_1元素能旋转,我们必须为它设置绝对定位,CSS代码如下:

.lingan_1 {  position: absolute; top: 0; left: 0; width: 90%; height: 100%;  }

通过JS代码来实现网页在手机竖屏情况下的横屏展示:

//JS代码来判断:屏幕宽度 < 屏幕高度时,即竖屏,就让页面.lingan_1元素横屏显示
const width = document.documentElement.clientWidth; //获取当前手机屏宽
const height = document.documentElement.clientHeight; //手机褡高
if (width < height) { //如果宽小于高,就是代表竖屏
const contentDOM = document.getElementById('lingan_1'); //获取lingan_1元素
contentDOM.style.width = height + 'px';  //设置该元素的宽等于屏高
contentDOM.style.height = width + 'px'; //设置该元素的高等于屏宽
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)'; //让该元素旋转90度,使其横屏展示
}

通过上面这段代码,就已经实现了在手机竖屏时横屏显示。

限制手机的“自动旋转”

这样还没完,因为页面已经横屏展示了,所以,我们要把手机横过来才能正常浏览网页。这时,如果手机没有开启“自动旋转”功能,我们可以正常浏览横屏网页。但如果我们开启了“自动旋转”功能,那就悲催喽,页面可能会再次旋转,因为,当我们旋转手机时,页面没有进行刷新,所以,JS获取到的屏宽依然是竖屏时的屏宽。

所以,我们还要限制手机的“自动旋转”,当然,JS代码没有办法来限制手机内在的功能,我们只能通过判断是否横屏或竖屏来实现页面是否旋转。这时,我们就要用到上面所提到手2个思路了。

方法1:判断屏宽度是否小于屏高:

//如果手机设置了自动旋转,还要以下代码来限制自动旋转,否则就悲催了
const evt = "onorientationchange" in window ? "orientationchange" : "resize"; //onorientationchange是Html5的一个屏幕旋转事件
window.addEventListener(evt, function () { //当触发了屏幕旋转事件时
const width = document.documentElement.clientWidth; //屏宽
const height = document.documentElement.clientHeight; //屏高
const contentDOM = document.getElementById('lingan_1'); //获取元素
if (width > height) { // 横屏
contentDOM.style.width = width + 'px';
contentDOM.style.height = height + 'px';
contentDOM.style.top = '0px';
contentDOM.style.left = '0px';
contentDOM.style.transform = 'none'; //当机横屏时,不旋转
}else {
//alert('change to portrait')
contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)'; //竖屏时旋转90度
}

}, false);

经测试,这种方式在苹果手机上能正常实现我们想要的效果,即竖屏时页面横屏展示,手机横屏时不发生旋转。但是在安卓手机就悲催了,居然实现不了我们想要的效果。所以,这种方案果断放弃,也许是因为手机发生旋转时,JS获取到的屏宽依然是竖屏时的屏宽。

方法2:通过判断旋转角度来判断是否竖屏或横屏

const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;
var screen_width = width; //屏幕宽度
if (width < height) {
screen_width = height; //如果 是竖屏,灵感的宽度就等于屏高
const contentDOM = document.getElementById('lingan_1');
contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)';
}
//根据手机旋转的角度来判断
const evt = "onorientationchange" in window ? "orientationchange" : "resize"; //旋转事件
window.addEventListener(evt, function () { //事件监听
if (window.orientation === 90 || window.orientation === -90) { //旋转到 90 或 -90 度,即竖屏到横屏
screen_width = height; //横屏,灵感的宽度就等于屏高
contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = '0px';
contentDOM.style.left = '0px';
contentDOM.style.transform = 'none'; //不旋转;
}else{ //旋转到 180 或 0 度,即横屏到竖屏
screen_width = height; //竖屏,灵感的宽度就等于屏高
contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)'; //旋转90度
}
}, false);

方法2中,我们通过旋转角度来判断,而不需要考虑旋转后屏幕的宽度。如果只是旋转了90度或-90度,就是竖屏,我们就设置页面旋转90度;如果手机旋转180度或0度,就不旋转页面。
经测试,在苹果手机和安卓手机上,都能实现我们想要的效果。

原文链接

Last modification:September 25, 2019
如果觉得我的文章对你有用,请随意赞赏