通过JavaScript监测手机浏览器的五种方法

一、navigator.userAgent【分析浏览器user agent字符串，其中包含了设备信息】

①JS通过navigator.userAgent属性识别移动设备，里面包含了（mobi、android、iphone等关键字即为移动设备）

if (
  navigator.userAgent.match(/Mobi/i) ||
  navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/iPhone/i)
) {
  // 当前设备是移动设备
}

缺点：该方法虽然方便简单，但用户可修改字符串，让手机浏览器伪装成桌面浏览器。

②Chromium 系的浏览器还有一个navigator.userAgentData属性，它把userAgent字符串作为对象解析，其中有一个mobile属性做为布尔值来判断是否移动设备。

navigator.userAgentData.mobile

缺点：苹果的 Safari 浏览器和 Firefox 浏览器都不支持这个属性，具体情况可以查看 Caniuse 网站。

③还有一个已经废除的navigator.platform属性，所有浏览器都支持，所以也可以用。它返回一个字符串，表示用户的操作系统。

---

二、window.screen，window.innerWidth【根据屏幕宽度判断】

①window.screen获取用户设备屏幕信息，当宽度(window.screen.width)小于500时，判断为手机

缺点：如果手机为横屏操作就无法判断。

②window.innerWidth返回浏览器窗口里面的网页可见部分的宽度，比较适合指定网页在不同宽度下的样式。

  if (window.innerWidth < 768) {
    return "xs";
  } else if (window.innerWidth < 991) {
    return "sm";
  } else if (window.innerWidth < 1199) {
    return "md";
  } else {
    return "lg";
  }

---

三、window.orientation

由于手机设备支持判断屏幕的方向（横向屏幕和纵向屏幕）。

通过window.orientation属性获取屏幕当前的方向，如果是电脑端，则返回undefined。

缺点：苹果的 Safari 浏览器和 Firefox 浏览器都不支持这个属性。

---

四、touch

手机浏览器的 DOM 元素可以通过ontouchstart属性，为touch事件指定监听函数。桌面设备没有这个属性。

function isMobile() { 
  return ('ontouchstart' in document.documentElement); 
}

// 另一种写法
function isMobile() {
  try {
    document.createEvent("TouchEvent"); return true;
  } catch(e) {
    return false; 
  }
}

---

五、window.matchMedia()

最后一种方法是结合 CSS 来判断。

CSS 通过 media query（媒体查询）为网页指定响应式样式。如果某个针对手机的 media query 语句生效了，就可以认为当前设备是移动设备。

window.matchMedia()方法接受一个 CSS 的 media query 语句作为参数，判断这个语句是否生效。

let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

上面示例中，window.matchMedia()的参数是一个 CSS 查询语句，表示只对屏幕宽度不超过 700 像素的设备生效。它返回一个对象，该对象的matches属性是一个布尔值。如果是true，就表示查询生效，当前设备是手机。

除了通过屏幕宽度判断，还可以通过指针的精确性判断。

let isMobile = window.matchMedia("(pointer:coarse)").matches;

上面示例中，CSS 语句pointer:coarse表示当前设备的指针是不精确的。由于手机不支持鼠标，只支持触摸，所以符合这个条件。

有些设备支持多种指针，比如同时支持鼠标和触摸。pointer:coarse只用来判断主指针，此外还有一个any-pointer命令判断所有指针。

let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

上面示例中，any-pointer:coarse表示所有指针里面，只要有一个指针是不精确的，就符合查询条件。

六、工具包

除了上面这些方法，也可以使用别人写好的工具包。这里推荐 react-device-detect，它支持多种粒度的设备侦测。

import {isMobile} from 'react-device-detect';

if (isMobile) {
  // 当前设备是移动设备
}