### CSS Media Queries 通过媒体查询的方式我们根据横竖屏来适配不同的样式 1.内联样式 ```css @media screen and (orientation:portrait) { //竖屏 } @media screen and (orientation:landscape) { //横屏 } ``` <!--more--> 2.外联样式 ```css <!-- 竖屏 --> <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](https://www.w3.org/TR/cssom-view-1/#dom-window-matchmedia) 规范增加了对 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() 的方法，我们可以这样判断横竖屏： ```js var mql = window.matchMedia("(orientation: portrait)"); function onMatchMeidaChange(mql){ if(mql.matches) { // 竖屏 }else { // 横屏 } } onMatchMeidaChange(mql); mql.addListener(onMatchMeidaChange); ``` ### window.innerHeight/window.innerWidth 在 CSS Media Queries 中，Orientation 属性有两个值： * portrait，指的是当 height 大于等于 width 的情况 * landscape，指的是当 height 小于 width 的情况 所以，还有一种最为常见的方法是通过比较页面的宽高，当页面的高大于等于宽时则认为是竖屏，反之则为横屏。 ```js function detectOrient(){ if(window.innerHeight >= window.innerWidth) { // 竖屏 }else { // 横屏 } } detectOrient(); window.addEventListener('resize',detectOrient); ``` ### window.orientation 在 iOS 平台以及大部分 Android 手机都有支持 `window.orientation` 这个属性，它返回一个与默认屏幕方向偏离的角度值： * 0：代表此时是默认屏幕方向 * 90：代表顺时针偏离默认屏幕方向90度 * -90：代表逆时针偏离默认屏幕方向90度 * 180：代表偏离默认屏幕方向180度 ```js switch(window.orientation) { case 0: displayStr += "Portrait"; break; case -90: displayStr += "Landscape (right, screen turned clockwise)"; break; case 90: displayStr += "Landscape (left, screen turned counterclockwise)"; break; case 180: displayStr += "Portrait (upside-down portrait)"; break; } ```  在实际应用中，对于 iPhone 和大部分 Android 是没有180度的手机竖屏翻转的情况的，但是 iPad 是存在的。所以，简化下代码，我们可以绑定orientationchange事件来判断横竖屏： ```js function detectOrient(){ if (Math.abs(window.orientation) === 90) { // 横屏 } else { // 竖屏 } } detectOrient(); window.addEventListener('orientationchange',detectOrient); ``` ### 影响判断的问题 * window.orientation属性值不一致(IOS相同,Android不一定一致哦) * 软键盘的弹出(Android情况下,软件盘的弹出会引起页面的收缩) ### 最佳实现方式 假如屏幕分辨率固定值为：screen.width 和 screen.height（需要注意，这里很重要的一点是：在移动端，屏幕翻转时，screen.width 和 screen.height 的值依然是不变的） * 若获取 当前页面的宽（document.documentElement.clientWidth），等于屏幕分辨率的宽(screen.width)，则可认定当前属于竖屏。 * 若获取 当前页面的宽（document.documentElement.clientWidth），等于屏幕分辨率的高(screen.height)，则可认定当前属于横屏。 ```js function detectOrient() { var storage = localStorage; var data = storage.getItem('J-recordOrientX'); var w = document.documentElement.clientWidth, h = document.documentElement.clientHeight; var _Width = 0, _Height = 0; if(!data) { _Width = window.screen.width; _Height = window.screen.height; storage.setItem('J-recordOrientX',_Width + ',' + _Height); }else { var str = data.split(','); _Width = str[0]; _Height = str[1]; } if(w == _Width) { // 竖屏 return; } if(w == _Height){ // 横屏 return; } } detectOrient(); window.addEventListener('resize',detectOrient); ``` ### 参考 - [凹凸实验室](https://aotu.io/notes/2017/01/31/detect-orientation/) - [W3](https://www.w3.org/TR/screen-orientation/) <p class="over">Over！</p>