JS强制手机端横屏方法

JS强制手机端横屏显示，需要通过代码来实现，我们需判断手机当前是否竖屏，如果是竖屏，就旋转网页让网页横屏显示，如果是横屏就不旋转网页。如何判断手机是否竖屏呢？

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度，使其横屏展示}

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

限制手机的“自动旋转”

方法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度，就不旋转页面。
经测试，在苹果手机和安卓手机上，都能实现我们想要的效果。