苦逼前端

移动设备横竖屏之终极解决方案

Javascript2014-07-09 15:17

移动开发项目中,我们经常会遇到一个蛋疼的横竖屏切换问题,因为浏览器不像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.innerWidth和window.innerHeight。如果前者大于后者,说明是横屏状态,相反则为竖屏状态。

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

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

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

评论(0)
  • 暂无评论,求挽尊...
还可输入200个字