对于移动端的页面，很多时候是不希望横屏显示的，有可能横屏显示页面显示不全或者影响美观，也或者其他的方面。

然而，横屏这个功能一般在手机或手机浏览网页的app上设置，作为网页是没有权限去操作这一设置的。

那么有什么办法能解决这一问题呢？

看成品请移步文章最后,。

看效果请点。

下面就简单讲讲两种方法

1. 通过判断窗口宽高值的比值判断是否横屏

对于正常手机屏幕来说，窗口宽度是小于窗口高度的，即 宽度/高度 的值是小于 1 的，那么如果手机横屏了呢，窗口原本的宽度变成了高度，原本的高度变成了宽度，此时， 宽高比就大于 1 了。以此来判断手机是否横屏。

代码如下：

functionrotate (){if(document.documentElement.clientWidth >document.documentElement.clientHeight){

alert('横屏了');

}else{

alert('没有横屏');

}

}

window.οnlοad=rotate;

window.οnresize= rotate;

但是，对于手机端的页面 ，一般 window.onload 和 window.onresize 两个事件都会被占用来做其他的事情，如果想这样写，就得在js中穿插 rotate 函数中的代码，使代码变得不那么规整。

2. 通过 orientationchange 事件判断是否横屏

orientationchange 为html5的新特性，是在用户水平或者垂直翻转设备(即方向发生变化)时触发的事件，而且这个事件一般不会被占用。

核心代码如下：

window.onorientatiοnchange=function(){if(window.orientation==90||window.orientation==-90){

alert('横屏了');

}else{

alert('没有横屏');

}

}

我们可以利用这个方法封装成一个自执行的js ，只要有用到，直接引用就可以了，很方便有木有

效果图如下：

代码如下：

//created : 2017.8.21//author : Guozhi_Han//Email : Guozhi_Han@126.com

(functionrotate(){var orientation=window.orientation;var pd = null;functioncreatePd(){if(document.getElementById('preventTran') === null){var imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABaCAYAAADkUTU1AAAI9ElEQVR4Xu1cfXBcVRU/5+Z1N8GEj2AhFQvUIigfBetYaRVbBhADU2wHVoYk3bx3k8kMcSyFPxzUf8IfOjrqIHYUXbL3vW6mKXbtINapg1ColLEUnYIj9QPGOE0VdUjjlE3tdnffO87J7GY26yZ9H5tNst37X5tzzu/87rl777v3nnMR5rhFo9HLhBDrhRC3AMBqAFgBABfmYU8CwAgAHAGAVwDgJaXUO+Vc6u7uXhkOh0/GYrGxIC5jEOVZdLG3t7fdcZyHiOgORHSL4xDRfiHEE/F4fB8AEGNIKdcS0fMA8IxpmluC+OzWEdcY0Wh0jaZp2wFgjWulMoJE9CoRbRVCEHcCIp4PAOOpVOqSZDJp+7VdMcIbNmzQVqxYMYCIXwEA4dehEj2O+GlEfF/h/xFxfTwef9mv/YoQ7u/vb06n00kA+FypIxweAHgdAJ4DgF9nMpmj4+Pj77Jca2vr0nA4fC0ArAeAO4lotYvh/22l1JfnjXAkEmluaWn5JQB8ukx09hLRgGVZb7hxUNf1m4QQjxHRxlmI/0kpxZ3kqwWNMEopfwIAkRL0fwNAn1Lq51696ujouKKxsfEwAFw6k246nV45PDzMs7vnFoiwlPIRAPhuCeqbjuPcYVnWv7x609nZ+cFwOMzL0xVn0d2qlOKJ0XPzTZjXxYaGhqMAEC5C/aOmaetisRivr55aV1fXsiVLlhxExJVnU+QlyjTNz55NrtzffROWUj4DAJuKjI4j4up4PH7MjyOGYTyNiPe70SWiDCK+XymVciNfLOOLcDQaXaVpGk9EU/qO40Qtyxry6kBB3jCMpUQUEUJsIKIbEPEqANBmsseypmn+1CueL8JSyh8AQH8BjIiOmKb5ca/gs8l3dnae39jYeJfjODxjXw8APNSn1mMiUqZp9njF9EXYMIw3EfG6IsKbTNN81iu4F/mBgQExOjq6DgA2A8AnAeC3SqmHvdhgWb+E/4mIbXkwO5VKXZxMJj1PVF6drYS8X8IPI+K3AKCBiLabprmtEs5Uw4YvwuyYrusXnjlzRtu1a1eg7Vo1SAaepavtZCXxfEe4kk5U01adcDV7ez6w6hGej16vJmY9wtXs7fnAKhvhSCTS1NTUtFQIcZ5t2xUbBYjo+7TRbecIITKZTObk8PDwf8rpTCPT0dFxUTgc/ioA8Kdjg1uQhShHRG8T0bZTp069kEwmMwUfpwgbhnEtIv4GAC5YiAT8+sTEbdu+NZFI/GNqtxSJRFqbm5v/ioiFKxC/9heq3gki+qhpmu9ORrinp+cpIupdqN5WyK+fKaU2Y19f3wW5XO4Eb/XKGHYK9zteQIlIuDhQ92KyIrKO41yNhmF0IWLZsygi6jdN88mKoM2BEcMwHkTEH7o1TUSP8EH64wBQdgNfa4QBwCrcHHyhXC/VIOE9TJiPOu+tE+bZqsZ+wwBQj/C0kV2PsNv5v0pyXpel+pAuDUytDulfAMDd59KyVCdciPYiHdJj2Wx2zdDQ0N90Xf+wEILzRS7Kc5pch2spwg4iLo3H4+OFoEkpPwAAf8/flNYc4f1KqdtL5yMpJSfKfKqwLNVShA8rpW4uJdzT0/M6Ed1Uc4Q56w8RP6OU4ohOtu7u7tuEEM/nDyRqbkgzxywRDRLRbkTsRES9KDmmJgnP9mG7h494ONz/90NnrUW6LM1OWErJidd1wvUIV2nL5wXG7/awPqQX+bf0bIMkyd/S50yEiWi4Trh4PNTaOlyIMGfB3nMunHgQUYy/tL6RrzUqxzlJRFMf4l6WjErJIiJXajXPYG8NIm50izV5mabr+i1CCN+FT27BFoJcLpe7hi/EeeI6lE+6Xgh+zZUPu5VS909mAESj0as1TePqsfPmCm0+7RLRO7Ztr0okEiemklrypLlc7sr5dG4OsF8TQtwzODjIxWPTSwA4P6ulpYWrSh5DxE/MAXi1THKqBpcHfjOVSh0qrkadMelMStmSTqdbGxsbF1W+Vi6XOyOEOGFZVrpc71Ysy65aoQuKUycctAcXun49wgs9QkH9W5QR3rJly/VNTU0jsVjsv147YFERbm9vDy9btoxvA28koveI6POWZR3wQtoP4YLO5Bsb1Wy6rm8UQhSX2T+tlHrAiw+eCRuGsQcRbwOAo1xGK4T4VSaTeXFoaOiUF2A/slJKTpHkVMnJRkRPmqY5VdbrxqYfwuX2z1kA4Az0P/DzMgCwzzTN424c8CIjpdxd/MCC4zjbLMt6wosNz4R1Xb9ZCMHbydkaX+TxmzpcZ/xjpRSXzwdqfX19S3K5HG8ACrf5IIRYOzg4+KoXw54Jc+HysWPHuH74EpdA25VSW13Kziim6zqXy3OEC20slUq1eX2mxjNhRpNSmlxR64LEHk3THojFYjzkAzUp5e8AoLjs/kdKqQe9GvVLmNON+cGS2dpzjuNsmmnX4sVRXdc7hBA7i3R4hfiYUur3XuywrC/C/CBBOBzm93RC5QCJ6MWxsbGNe/fu9fxhUGovGo1e3tDQcAQRLy78jYieNU2z+EkN17x9Ec4P6xcAgJenaY2IDk5MTNyVTCYnXHsxgyB3bCgUehkRbywim7Ft+4ZEIvGWH/u+Ceu6/pAQ4ntlQF87ffr03UFL5Xt7ey+1bXsfP4ZSjOE4zqOWZfH7A76ab8JdXV1XhUKht2cY0qOO48gdO3bs9+OVYRh3AkAcES8r0edSHM7e5yMcX8034fyw/jMAXAMAXFNYehTETvFE83Wl1F/ceNfd3X2dEOJr+Sdqpj1CRkSHJyYmbg/6UwlE2DAMPuyLZLPZezVNiyFi6ZtazJOJ8+0F54Mdymazbx0/fnwyU2758uWtoVDoI7Ztr+WTRSJaW67eiSfBTCazeefOne+56bjZZAIRzhtmG8Q7mba2tu8AwBcrWKTFnfX4yMjIowcOHMgFJcv6lSA8zQ8p5a0AwJPZqiAOEtEb/AigZVkHg9gp1a04YQaIRCINzc3N9yHil4honYeIF4b/9/Pf374np5k6aU4IF4NJKT8EAO355E5+NelyACjcBvJ7WKMAwLusV3K53L5EIsH/nrP2PzAJNfmP9znfAAAAAElFTkSuQmCC';

pd= document.createElement('div');

pd.setAttribute('id','preventTran');

pd.style.position= 'fixed';

pd.style.left= '0';

pd.style.top= '0';

pd.style.width= '100%';

pd.style.height= '100%';

pd.style.overflow= 'hidden';

pd.style.backgroundColor= '#2e2e2e';

pd.style.textAlign= 'center';

pd.style.zIndex= '99999';

document.getElementsByTagName('body')[0].appendChild(pd);var img = document.createElement('img');

img.src=imgData;

pd.appendChild(img);

img.style.margin= '60px auto 30px'

var br = document.createElement('br');var p = document.createElement('p');

p.style.width= '100%';

p.style.height= 'auto';

p.style.fontSize= '22px';

p.style.color= '#626262';

p.style.lineHeight= '34px';

p.style.textAlign= 'center';

p.innerHTML= '为了您的良好体验';

p.appendChild(br);

p.innerHTML+= '请将手机/平板竖屏操作';

pd.appendChild(p);

}

}if(orientation==90||orientation==-90){if(pd == null && document.getElementById('preventTran') === null) createPd();

document.getElementById('preventTran').style.display = 'block';

}

window.onorientatiοnchange=function(){if(pd == null && document.getElementById('preventTran') == null) createPd();

document.getElementById('preventTran').style.display='none';

rotate();

};

})();

(完)