javascript获取各种客户端设备信息

通过获取用户的设备信息，可以针对这些信息做一些页面上的调整与优化。基本原理就是通过navigator.userAgent获取当前浏览器的用户代理字符串，利用正则判断用户的设备。

---

上图是navigator.userAgent返回的关于当前浏览器的用户代理字符串。可以看到其中就包含Mac OS X 10_12_6、Chrome、AppleWebKit、iPhone等字符串。我们就可以通过提取字符串中有用的信息，通过判断它们来获取用户使用的设备信息。

---

/*
 * 判断是PC端还是移动端
 * 例：移动端用户登录PC端网址可以进行跳转移动端网址或做一些响应式改变
 */
const ua = navigator.userAgent
const isPhone = /(iPhone|iPad|iPod|iOS|Android)/i.test(ua)
isPhone ? window.location.href = 'https://h5.m.taobao.com/' : ''

/*
 * 判断是Android端还是iPhone端。将上面代码Android单独判断即可
 * 例：移动端用户点击网页上下载APP时，根据判断其设备下载对应的安装包
 */
const ua = navigator.userAgent
const isIPhone = /(iPhone|iPad|iPod|iOS)/i.test(ua)
const isAndroid = /(Android)/i.test(ua)

/*
 * 判断浏览器内核、种类
 * 例：根据不同浏览器、不同容器，对页面进行修改
 */
const ua = navigator.userAgent
const kernel = {
  isIE: ua.indexof('Trident') > -1, // IE内核
  isOpera: ua.indexOf('Presto') > -1, //opera内核
  isWebKit: ua.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
  isFirfox: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') == -1, //火狐内核
  weixin: ua.indexOf('MicroMessenger') > -1, //是否微信 
  qq: ua.match(/\sQQ/i) == " qq" //是否QQ
}