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

• 版权声明：本站原创文章，于2023-05-17，由卓越飞翔博客发表，共 3584个字。下载次
• 转载请注明：JS强制手机端横屏方法 - 卓越飞翔博客 +复制链接