【vue】判断各种客户端（PC,ios,安卓等）总结

1.实现功能

在做前端项目时，有时候我们需要判断用户在不同的客户端（谷歌内核，火狐内核，iOS端，移动端等）所展现的内容样式不同，下面就是为大家提供的平常经常用到的各种客户端的判断方法：

首先封装一个方法放到utils文件夹中

代码如下：

// 用户代理端判断
const browser = () => {
  const u = navigator.userAgent
  return {
    edge: u.indexOf('Edge') > -1, // Edge内核
    trident: u.indexOf('Trident') > -1, // IE内核
    presto: u.indexOf('Presto') > -1, // opera内核
    webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // 火狐内核
    mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
    iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
    iPad: u.indexOf('iPad') > -1, // 是否iPad
    webApp: u.indexOf('Safari') === -1, // 是否web应用程序，没有头部与底部
    weixin: u.indexOf('MicroMessenger') > -1, // 是否微信 （2015-01-22新增）
    qq: u.match(/\sQQ/i) === 'qq' // 是否QQ
  }
}
export default browser

最后在页面中引入，通过this.xxx判断是否xxx端