JS强制手机端横屏方法

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

//如果手机设置了自动旋转，还要以下代码来限制自动旋转，否则就悲催了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);

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);