
探讨判断横竖屏的最佳实现
在移动端,判断横竖屏的场景并不少见,比如根据横竖屏以不同的样式来适配,抑或是提醒用户切换为竖屏以保持良好的用户体验。 判断横竖屏的实现方法多种多样,本文就此来探讨下目前有哪些实现方法以及其中的优缺点。 CSS Media Queries 通过媒体查询的方式,我们可以通过以下方法来实现根据横竖屏不同的情况来适配样式: 1.内联样式
1 2 3 4 5 6 |
@media screen and (orientation:portrait) { //竖屏 } @media screen and (orientation:landscape) { //横屏 } |
2.外联样式
1 2 3 4 |
<!-- 竖屏 --> <link rel="stylesheet" media="all and (orientation:portrait)" href="..." /> <!-- 横屏 --> <link rel="stylesheet" media="all and (orientation:landscape)" href="..." /> |
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() 的方法,我们可以这样判断横竖屏:
1 2 3 4 5 6 7 8 9 10 |
var mql = window.matchMedia("(orientation: portrait)"); function onMatchMeidaChange(mql){ if(mql.matches) { // 竖屏 }else { // 横屏 } } onMatchMeidaChange(mql); mql.addListener(onMatchMeidaChange); |
通过Can I Use […]