通过获取用户的设备信息,可以针对这些信息做一些页面上的调整与优化。基本原理就是通过
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
}