使用JS实现手机端强制横屏的方法
要实现JS强制手机端横屏，可以使用以下代码： ```javascript // 判断是否为移动设备 var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); // 判断屏幕方向 function screenOrientation() { if (window.orientation === 90 || window.orientation === -90) { return '横屏'; } else { return '竖屏'; } } // 强制横屏 if (isMobile && screenOrientation() === '竖屏') { document.addEventListener('DOMContentLoaded', function () { window.screen.orientation.lock('landscape'); }); } ``` 这段代码首先判断是否为移动设备，
JS强制手机端横屏显示，需要通过代码来实现，我们需判断手机当前是否竖屏，如果是竖屏，就旋转网页让网页横屏显示，如果是横屏就不旋转网页。如何判断手机是否竖屏呢？
HTML代码：
<divclass="lingan_1"id="lingan_1"><imgsrc="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元素横屏显示constwidth=document.documentElement.clientWidth;//获取当前手机屏宽constheight=document.documentElement.clientHeight;//手机褡高if(width<height){//如果宽小于高，就是代表竖屏constcontentDOM=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：判断屏宽度是否小于屏高：
//如果手机设置了自动旋转，还要以下代码来限制自动旋转，否则就悲催了constevt="onorientationchange"inwindow?"orientationchange":"resize";//onorientationchange是Html5的一个屏幕旋转事件window.addEventListener(evt,function(){//当触发了屏幕旋转事件时constwidth=document.documentElement.clientWidth;//屏宽constheight=document.documentElement.clientHeight;//屏高constcontentDOM=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('changetoportrait')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：通过判断旋转角度来判断是否竖屏或横屏
constwidth=document.documentElement.clientWidth;constheight=document.documentElement.clientHeight;varscreen_width=width;//屏幕宽度if(width<height){screen_width=height;//如果是竖屏，灵感的宽度就等于屏高constcontentDOM=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)';}//根据手机旋转的角度来判断constevt="onorientationchange"inwindow?"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度，就不旋转页面。
经测试，在苹果手机和安卓手机上，都能实现我们想要的效果。
