当前位置:Gxlcms > JavaScript > 移动端开发之处理手机设备的横竖屏

移动端开发之处理手机设备的横竖屏

时间:2021-07-01 10:21:17 帮助过:7人阅读

这篇文章主要介绍了Mobile Web开发基础之-—处理手机设备的横竖屏,window.orientation属性与onorientationchange事件以及media query方式是开发过程中需要注意到的两种解决方式,需要的朋友可以参考下

为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个)。很多时候,我们需要为不同的屏幕方向来设计对应的应用显示模式,这个时候,实时地获知设备的模竖屏状态就显得极为重要。

window.orientation属性与onorientationchange事件

window.orientation :这个属性给出了当前设备的屏幕方向,0表示竖屏,正负90表示横屏(向左与向右)模式
onorientationchange : 在每次屏幕方向在横竖屏间切换后,就会触发这个window事件,用法与传统的事件类似

1:使用onorientationchange事件的回调函数,来动态地为body标签添加一个叫orient的属性,同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式,这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例:


2: 类似的思路,不通过CSS的属性选择器来实现,如下代码的实现方案:



使用media query方式
这是一种更为方便的方式,使用纯CSS就实现了对应的功能,如下代码演示:


低版本浏览器的平稳降级
如果目标移动浏览器不支持media query,同时window.orientation也不存在,则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比,从而判定当前的横竖屏状态。如下代码所示:


统一解决方案
将以上的两种解决方案整合在一起,就可以实现一个跨浏览器的解决方案,如下代码:


以上就是移动端开发之处理手机设备的横竖屏的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行