我们通常在开发H5页面时除了100%宽度适配可能也需要做横竖屏版差异。这里就涉及到如何检测移动设备是横竖屏的情况。下面列出几种检测的方法。

JavaScript方法检测

在 iOS 平台以及大部分 Android 手机都有浏览器提供的 window.orientation 这个属性。它返回一个与默认屏幕方向偏离的角度值：

  • 0°：代表此时是默认屏幕方向
  • 90°：代表顺时针偏离默认屏幕方向90度
  • -90°：代表逆时针偏离默认屏幕方向90度
  • 180°：代表偏离默认屏幕方向180度

由此可以知道当设备的旋转角度为：0 或 180° 为竖屏 90° 或 -90° 为横屏。

代码如下：

  1. if (Math.abs((window.orientation) as unknown as number) === 90) {
  2.   // 横屏
  3.   return 'landscape'
  4. } else {
  5.   // 竖屏
  6.   return 'portrait'
  7. }

css媒体查询

可以通过媒体查询方式。获取当前屏幕状态：

内联样式

  1. @media screen and (orientation:portrait) {
  2.    // 竖屏
  3. }
  4. @media screen and (orientation:landscape) {
  5.    // 横屏
  6. }

外联样式

  1. <!-- 竖屏 -->
  2. <link rel="stylesheet" media="all and (orientation:portrait)" href="..." />
  3. <!-- 横屏 -->
  4. <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. var mql = window.matchMedia("(orientation: portrait)");
  2. function onMatchMeidaChange(mql){
  3.     if(mql.matches) {
  4.         // 竖屏
  5.     }else {
  6.         // 横屏
  7.     }
  8. }
  9. onMatchMeidaChange(mql);
  10. mql.addListener(onMatchMeidaChange);

注：通过 Can I Use - matchMeida可以知道，该API在移动端得到良好的支持，并无兼容性问题。