Navigator：userAgent 属性获取设备浏览器信息

admin 管理员组

文章数量: 887017

Navigator：userAgent 属性获取设备浏览器信息

• 1. userAgent 是什么
• 2. userAgent 的使用示例
• 3. userAgent 的使用限制
• 4. userAgent 的前世今生

1. userAgent 是什么

userAgent 的定义：Navigator.userAgent 只读属性返回当前浏览器的用户代理字符串，用于指定浏览器在 HTTP 标头以及当前属性和 Navigator 对象的其他相关方法的响应中提供的完整用户代理字符串。

userAgent 的值：用户代理字符串遵循严格的结构，可以分解为多个信息片段。每个信息片段都来自其他用户代理属性，这些属性也可以由用户设置。

示例：

	console.log(window.navigator.userAgent);
	// Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0

2. userAgent 的使用示例

1. 判断是否在安卓设备内

   	isAndroid = () => {
   		return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
   	};
   

2. 判断是否在ios设备内

   	isiOS = () => {
   		return (
   			ulc.includes('iphone') ||
   			ulc.includes('ios') ||
   			ulc.includes('ipad') ||
   			(ulc.includes('mac os x') && 'ontouchend' in document)
   		);
   	};
   

3. 判断是否是有刘海屏的 iPhone（特征 iOS + 机身长）

   	isHasSafeAreaIphone = () => {
   		// 上个IOS示例函数
   		return isiOS() && window.screen.height >= 812;
   	};
   

4. 判断是否在小程序环境内

   	isWxMiniProgram = () => {
   		return (
   			!!u.match(/miniprogram/i) ||
   			window.__wxjs_environment === 'miniprogram' ||
   			u.toLowerCase().includes('miniprogram')
   		);
   	};
   

5. 判断是否是微信内置浏览器（公众号页面）

   	isWechatBrowser = () => {
   		return !!u.match(/MicroMessenger/i);
   	};
   

6. 判断支付宝浏览器

   	isAlipayClient = () => {
   		return !!u.match(/AlipayClient/i);
   	};
   

7. 判断是否是原生 APP 环境

   	isAppClient = () => {
   		return /CMMManager/.test(u) || /CmmManager/.test(u);
   	};
   

8. 判断是否IE<11浏览器

   	isIE = () => {
   		return userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
   	};	
   

9. 判断是否IE<11浏览器

   	isIE11 = () => {
   		return userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
   	};	
   

10. 判断是否Edge浏览器

    	isEdge = () => {
    		return userAgent.indexOf('Edge') > -1 && !(userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1);
    	};	
    

11. 判断是否Firefox浏览器

    	isFirefox = () => {
    		return userAgent.indexOf('Firefox') > -1;
    	};	
    

12. 判断是否Opera浏览器

    	isOpera = () => {
    		return userAgent.indexOf('Opera') > -1 || userAgent.indexOf('OPR') > -1;
    	};	
    

13. 判断是否Chrome浏览器

    	isChrome = () => {
    		return userAgent.indexOf('Chrome') > -1 &&
    			    userAgent.indexOf('Safari') > -1 &&
    			    userAgent.indexOf('Edge') === -1 &&
    			    userAgent.indexOf('OPR') === -1;
    	};	
    

14. 判断是否Safari浏览器

    	isSafari = () => {
    		return userAgent.indexOf('Safari') > -1 &&
    			    userAgent.indexOf('Chrome') === -1 &&
    			    userAgent.indexOf('Edge') === -1 &&
    			    userAgent.indexOf('OPR') === -1;
    	};	
    

3. userAgent 的使用限制

1. 规范要求浏览器尽可能减少通过此字段提供的信息。请勿假设此属性的值在同一浏览器的未来版本中会保持不变。尽量不要使用它，或者仅将其用于当前和过去版本的浏览器。
2. 新版浏览器可能与旧版浏览器开始使用相同的 UA 或部分 UA，因此你无法完全保证浏览器代理确实是此属性所宣告的浏览器代理。此外，请注意浏览器用户可以根据需要更改此字段的值（UA 欺骗）。

4. userAgent 的前世今生

1955年6月8日，伯纳斯·李（Tim Berners-Lee）出生于英格兰伦敦西南部。他的父母都参与了世界上第一台商业电脑，曼切斯特1型的建造。1976年从牛津大学物理系获得一级荣誉学位，毕业之后，就职于英国一些高技术公司。1984年，一个偶然的机会，来到瑞士的日内瓦，进入著名的由欧洲原子核研究会（CERN）建立的粒子实验室。

起初计算机只是以单机模式被广泛应用，1977到1979年间推出目前形式的TCP/IP体系结构和协议规范，1987年，尼尔森出版了《文字机器》，计划是做一个进行在线超文本出版和商务的全球系统；而后1989年，Internet上的主机数量突破了100000台。

1989年,欧洲粒子物理实验室（CERN）当时连因特网已有两年时间了，伯纳斯·李建议采用超文本技术（Hypertext）把CERN内部的各个实验室连接起来，在系统建成后，将可能扩展到全世界。后来总算得到了批准，并得到了一笔经费，购买了一台NEXT计算机；

1989年仲夏之夜，伯纳斯·李成功开发出世界上第一个Web服务器和第一个Web客户机。虽然这个Web服务器简陋得只能说是CERN的电话号码簿，它只是允许用户进入主机以查询每个研究人员的电话号码，但它实实在在是一个所见即所得的超文本浏览；

1989年12月，他的发明正式定名为World Wide Web，即我们熟悉的WWW（是基于客户机/服务器方式的信息发现技术和超文本技术的综合）；这位老兄顺便也做出了史上第一个浏览器，也叫WorldWideWeb，这个浏览器只能在NeXT系统上运行，NeXT软件公司的老板就是当年被苹果扫地出门的乔布斯。后来苹果将NeXT收购，乔布斯也重新掌管苹果，NeXT系统也成为了优雅的macOS的基础。但是这名字这么长，后来伯纳斯·李把WorldWideWeb更名为Nexus（连接），得益于兼容Unix和Microsoft DOS，当年它成为最流行的浏览器，不过它只支持文字展示，还不支持图片展示；

1992年，期间出现了基于Unix浏览器Erwise、以及一个纯文字的浏览器Lynx,但是视频音频功能强大；

1993年，伊利诺伊的NCSA(美国国家超级计算应用中心)组织认为没有图片的网页就像失去颜色的世界！因此他们发明了第一个可以显示图片的浏览器：Mosaic（马赛克）；

此时的霸主是Nexus，它是不能显示图片的，而Mosaic能显示，这就叫html的开发陷入了两难的境地。之后Mosaic想到了一个办法：这本质上就是一个身份的问题嘛，那我就在给你发请求的时候告诉你们我的身份，和Nexus区分开来不就行了，这就是UserAgent的由来。比如Mosaic把自己标注为NCSA_Mosaic/2.0(Windows 3.1)。

但是我们看到的很多UserAgent的开头是Mozilla，是为什么呢？

别急，故事还没有结束；很快就出来一个混世魔王，叫Mozilla。在PC时代，浏览器作为一个巨大的流量和资源的入口，可以带来难以估量的商业价值。这也是Mosaic团队领导人马克•安德森(Marc Andreessen)带领团队辞职并自主创业建立Netscape(网景公司)的原因；

1994年，在Mosaic如日中天的时候，网景公司发明了一款浏览器，希望能够取代Mosaic，他的名字就叫：Mozilla。Mozilla由“Mosaic Killa”变化而来，大致意思就是吃掉Mosaic；

碍于当时Mosaic的江湖地位，网景公司怕不得已把浏览器名字改为Netscape Navigator(网景航海家)，但是仍然偷偷地在自己的UserAgent后面写上了Mozilla。以网景为首的一批互联网技术公司的崛起，迅速构成了一股隐隐的可以与微软分庭抗礼的新力量。比尔盖茨和网景谈判，希望建立合作关系，但是网景公司雄心壮志，岂会就此买账，于是谈判破裂；

1995年，为了快速抢占市场，收购了一家名为Spyglass的公司，这家公司已经从NCSA处买了Mosaic的授权。可以基于此直接开始开发，于是迅速发布了IE 1.0（Explorer 探索者）、IE2.0（加入了支持JavasScript功能），但是由于这两个版本还是不够完美。但是为了彻底摧毁网景，微软决定将IE免费开放，但是网景浏览器收费但是要45美元，这还不够，半年后宣布Windows95与IE捆绑销售，并且还宣布自己是兼容Mozilla的，还将自己的userAgent改成Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)。这下网景彻底绝望了；

1996年，一家挪威的公司也推出了一款浏览器，Opera（歌剧）浏览器首次亮相，它支持单窗口多文档阅读。在IE和FireFox（火狐）还在龙争虎斗的时候，市场上还存在另外一个著名的操作系统Linux，Linux看着Window的IE浏览器非常眼红，于是寻思着也开发一款基于Linux的浏览器。于是Konqueror浏览器也出现了，它可以运行在类Unix（Linux）系统上；

1997年，微软用两年时间就从IE1.0更新到了IE4.0，并率先推出了Trident内核，这种开发效率太恐怖了；

1998年，网景公司与IE浏览器竞争失利后，为了挽回市场，宣布旗下所有的软件都免费。并开放了网景通信家（Netscape Communicator 4.0）的源代码。失败后，他们围绕着浏览器排版引擎 Gecko (壁虎) 成立了非正式组织 Mozilla。同年11月，AOL（美国在线）为了防止浏览器再度被垄断，耗资42亿美元收购了网景；

2001年，8月27日微软发布IE6浏览器，IE6以垄断性的市场份额独占鳌头。 Netscape逐渐在与IE6竞争中败下阵来；

2002年，原网景公司的一批大神，开发出了Phoenix（凤凰）浏览器，有点“凤凰涅槃”之意，但是刚推出就被人告了，原来已经有一家公司叫做 “凤凰科技”；然后准备改名叫Firebird（火鸟），苍天啊，没想到又有一个开源数据库居然也叫Firebird，泪流满面的Mozilla感慨重生好难呀，最终还是叫 Firefox (火狐)吧，火狐一直备受关注。后来美国在线向微软提出索偿诉讼，微软因滥用垄断能力而败讼后；

在2003年5月，微软和AOL（美国在线）达成和解协议，愿意支付网景7.5亿美元。同年7月，AOL（美国在线）解散网景公司，并且将Netscape源码送给了开源社区，成立了Mozilla基金会（如今是Firefox浏览器的管理与推进组织）；

也是在2003年，苹果发布了Safair浏览器，内核是WebKit，WebKit起初是KHTML渲染引擎的一个分支，使用在Linux系统的浏览器上，后来专注发展开源引擎，并在05年开源了Safair的内核，也就是现在占领了浏览器大半江山的Webkit内核；

2004年，Firefox 1.0发布，基于 Gecko 引擎的 Firefox 非常优秀，它标志自己的 UserAgent 为 Mozilla/5.0 (Windows; U; Windows NT 5.1; sv-SE; rv:1.7.5) Gecko/20041108 Firefox/1.0 ，Firefox 在业内广受好评，得到了快速的发展；

但是，Linux的追随者对此很难过，因为他们编写Konqueror，它的引擎是KHTML，他们认为KHTML和Gecko一样出色，于是Konqueror为得到更好的页面开始将自己伪装成“like Gecko”，从此“Like Gecko”也变成了一个行内皆知的萌词；

脑洞大开的Opera觉得IE和Konqueror的做法真的太棒了，甚得吾心！于是他直接在菜单提供了三个UserAgent 选项，让用户选择IE/Firefox/Opera，想变谁就变谁；

几年间IE虽然独霸、但不思进取，自己搞一套web标准，还不能完美支持html、javascript、css等新特性，一直维持着速度慢、体验差、不稳定的特点，让人不得不想要找个更好的替代品；

2008年，谷歌（Chrome）参战，内核是WebKit的一个分支，命名为chromium， 后来谷歌研发了自己的JavaScript引擎V8，极大地提高了JS的运算速度；

2009年谷歌推出Chrome扩展库，用户可以安装第三方插件到Chrome；

2010年，苹果就已经发布了Webkit2。Webkit2的目标是将元件抽象化，并提供更干净的网页渲染。

2012年，Chrome占有31%的市场份额，取代IE成为全球最受欢迎的浏览器；

2013年谷歌推出全新的浏览器内核项目Blink，Opera玩了几年自己的内核后，跟Google一起开发Blink内核，并在4月发布第一个版本。

微软为了遏制Chrome，从09年开始频繁更新IE和Trident内核版本号，当年就发布了Trident4.0，11年Trident5.0，12年Trident6.0，13年Trident7.0（即IE 11，随Windows 8.1发行）；

2015年，微软对IE极致优化并改名为EdgeHTML，跟随Win10同步发布。但是Edge可以做的一切Chrome和Firefox都可以做得更好。

2018年12月，微软正式确认，新的Edge浏览器将从EdgeHTML内核迁移为Chromium内核，正式版已于2020年1月15日正式发布。

2021年5月19日，微软宣布IE浏览器将在次年退出市场，2022年6月15日，大多数版本的Windows 10系统不再支持IE浏览器（IE11退役），取而代之的是更新、更快、更安全的Edge浏览器。

本文标签： 属性 浏览器 设备 信息 Navigator