探讨判断横竖屏的最佳实现

在移动端,判断横竖屏的场景并不少见,比如根据横竖屏以不同的样式来适配,抑或是提醒用户切换为竖屏以保持良好的用户体验。 判断横竖屏的实现方法多种多样,本文就此来探讨下目前有哪些实现方法以及其中的优缺点。 CSS Media Queries 通过媒体查询的方式,我们可以通过以下方法来实现根据横竖屏不同的情况来适配样式: 1.内联样式

2.外联样式

window.matchMedia() 除此之外,CSS Object Model(CSSOM)Views 规范增加了对 JavaScript 操作 CSS Media Queries 的原生支持,它在 window 对象下增加了 matchMedia() 方法,让我们能够通过脚本的方式来实现媒体查询。 window.matchMedia() 方法接受一个 Media Queries 语句的字符串作为参数,返回一个 MediaQueryList 对象。该对象有 media 和 matches 两个属性: media:返回所查询的 Media Queries 语句字符串 matches:返回一个布尔值,表示当前环境是否匹配查询语句 同时,它还包含了两个方法,用来监听事件: addListener(callback):绑定回调 callback 函数 removeListener(callback):注销回调 callback 函数 那么,通过 window.matchMedia() 的方法,我们可以这样判断横竖屏:

通过Can I Use […]

© 2017 JDC. All Rights Reserved.