02May
探讨判断横竖屏的最佳实现
在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。 判断横竖屏的实现方法多种多样，本文就此来探讨下目前有哪些实现方法以及其中的优缺点。 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 […]