移动开发项目中,我们经常会遇到一个蛋疼的横竖屏切换问题,因为浏览器不像 Native 可以自主控制是否允许横竖屏切换。只能同时兼容它横屏和竖屏下的样式了。

要实现区分横竖屏样式,可以有两种方式:

1.利用高级浏览器的 window.orientation 属性和 onorientationchange 事件,实时监听横竖屏。

window.orientation 属性给出了当前浏览器的屏幕方向,0 是正常的竖屏状态,以此为基准,90 是左转 90 度横屏,-90 是右转 90 度横屏。然后旋转 180 度后的上下颠倒,目前本人手机还不支持(iOS7.1 & Android4.4). onorientationchange 事件,就像普通的 click 事件一样,不过是在屏幕发生旋转的时候会触发。结合这两者,我们可以想象,给 window 添加 onorientationchange 事件监听,然后在回调中判断 window.orientation 的值,就可以区分出横屏、竖屏了。

那么对于不支持这两个东西的普通浏览器(例如 chrome 的模拟内核,就不支持..)如何做到区分横竖屏呢?之前我想到的方法是利用 onresize 事件,然而某些傻逼浏览器,在上下滑动的时候居然也会频繁触发这个事件。直到后来发现了更好的方法:实时的对比屏幕当前的宽高 window.innerWidthwindow.innerHeight. 如果前者大于后者,说明是横屏状态,相反则为竖屏状态。

2.利用 media query 实现横竖屏样式控制:

@media all and (orientation: landscape){
    xxxx
}
@media all and (orientation: portrait){
    xxxx
}

上面和下面分别对应横竖、竖屏下的样式。

iOS 横屏时还有个字体变大的问题,可以通过以下样式解决:

    .some-class{
        -webkit-text-size-adjust: none;
    }