莫得感情的平台检测

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

写个标题

    移动端的项目开发，绕不开的话题之检测当前设备，这里的检测主要是判断是PC、Android、IOS、pad等不同的主系统区分，细分的时还会包含对不同的浏览器，这部分就主要微信浏览器、主流浏览器内核，用于在开发时针对不同的设备做兼容。

无论是简单的检测系统，还是想细分检测具体的浏览器，都是基于一个浏览器自带的APInavigator.userAgent的，先看一波这个接口提供的数据。

> navigator.userAgent

'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1'

打印时是在电脑端的浏览器模拟手机端设备。

控制台打印接口，可以看到返回值中最容易理解的就是iPhone了，模拟器模拟的是iPhone X， 那么这里在需要调用时，可以直接划分为当前显示移动端了。

其他的可能检测情况如下。

var isiOs = false;
var isAndroid = false;
var isWindowsPhone = false;
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
  isiOS = true;
} else if(/(Android)/i.test(navigator.userAgent)) {
  isAndroid = true;
} else if(/(Windows Phone)/i.test(navigator.userAgent)) {
  isWindowsPhone = true;
}

这里再来一个比较丰富一点的版本。这个版本对于设备的确认更加严谨。

  var ua = navigator.userAgent,
  isWindowsPhone = /(?:Windows Phone)/.test(ua),
  isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
  isAndroid = /(?:Android)/.test(ua),
  isFireFox = /(?:Firefox)/.test(ua),
  isChrome = /(?:Chrome|CriOS)/.test(ua),
  isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
  isPhone = /(?:iPhone)/.test(ua) && !isTablet;

最后，根据实际开发确认需要的做法。