在我们在弄移动端项目的时候，产品经常会让你考虑设备横屏的效果，这样对前端来说也是一个挑战吧，如果你领会了其横竖屏切换的思路，那些问题应该会迎刃而解了。在这想谈的就是关于如何判断手机横竖屏，以及监控窗口变化来实现监控手机屏幕横竖屏。
CSS3判断手机横屏竖屏
原理：
当用户旋转屏幕的时候，会进入到你的监听方法中，然后通过window.orientation来获取当前屏幕的状态：
0 - 竖屏
90 - 逆时针旋转横屏
-90 - 顺时针旋转横屏
180 - 竖屏，上下颠倒
如果你不希望用户使用横屏方式查看你的网页，你可以在设备旋转时间监听里面对body使用CSS3里面的transition中的旋转来保持页面竖向。
移动设备上的页面，当屏幕旋转的时候会有一个orientationchange事件。你可以给body元素增加此事件的监听：
<body onorientationchange="updateOrientation();">
监控窗体变化来实现监控手机屏幕横竖
@media screen and (orientation:portrait) {
css[竖向定义样式]
}
@media screen and (orientation:landscape) {
css[横向定义样式]
}
网友评论文明上网理性发言已有0人参与
发表评论: