对于移动端的页面,很多时候是不希望横屏显示的,有可能横屏显示页面显示不全或者影响美观,也或者其他的方面。
然而,横屏这个功能一般在手机或手机浏览网页的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){