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

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


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


/*
 * 判断是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
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,605评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,524评论 2 59
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,404评论 1 45
  • 今天是比较忙的一天,整理这108天的里程,才知道这将是我一生中最难忘的日子,我们在这108天里,我认识了这...
    平淡是福1188阅读 1,486评论 0 0
  • 一刚生不久的小狗来,小且夜狂吠,家人嫌烦想送走无人要,无奈丢之,狗又回,从此养之。此狗随新主人生活时刻不离,下田上...
    天有能阅读 2,695评论 0 0

友情链接更多精彩内容