移动端开发-禁止横屏

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

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

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

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

看效果请点这里。

下面就简单讲讲两种方法

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

 

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

代码如下：

function rotate (){
    
    if(document.documentElement.clientWidth > document.documentElement.clientHeight){
        alert('横屏了');
    }else{
        alert('没有横屏');
    }
}
window.onload = rotate;
window.onresize = rotate;

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

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

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

核心代码如下：

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