`

浏览器各自的userAgent特点做一分析-并给出判断方法

 
阅读更多

不同设备浏览器的userAgent值大全[转]

 (2012-04-26 15:28:25)
标签: 

杂谈

 

最近在使用jQuery进行网站产品开发,涉及到浏览器兼容性问题比较多,于是决定集中整理一下:

这里使用了js的alert(navigator.userAgent.toLowerCase());方式获取浏览器的userAgent信息:

为了直观起见,直接把截图放上来吧:

IE6

IE7

IE8

IE9

Firefox

Chrome

Opera

Safari

Android自带浏览器

Android版Opera Mobile

Android版Firefox

iPhone自带Safari

iPhone版Opera Mobile



暂时就只罗列了Windows、Android、iPhone平台上面的这么多,Linux、Mac OS、Windows Phone、iPad等希望日后补齐吧。

 

下一篇文章将分析如何根据userAgent判断用户设备、浏览器内核,以及其相关应用。

 

 

这里对浏览器各自的userAgent特点做一分析,并给出判断方法:
 

Windows操作系统浏览器系列:
 

  • IE浏览器系列:
    特征表现:均以 "mozilla/" 开头,"msie x.0;" 中的x表示其版本;
    判断方法:粗略判断可以只检索 "msie x.0;" 字符串即可,严格判断可检索 "mozilla/x.0 (compatibal; msie x.0; windows nt",不过一般没有这个必要
  • Windows版Firefox:
    特征表现:以"mozilla/x.0"开头,包含"windows nt","gecko/"和"firefox/" ;
    判断方法:粗略判断可以只检索 "firefox/"和"windows nt" 字符串,严格判断可以检索"mozilla/" ,"windows nt","gecko/"和"firefox/" 四个字符串;
  • Windows版Chrome:
    特征表现: 以"mozilla/x.0"开头,包含"windows nt","chrome/",同时包含"applewebkit/","safari/";
    判断方法:粗略判断可以只检索 "windows nt"和"chrome/"字符串,严格判断可以同时检索 "mozilla/" ,"windows nt","applewebkit/","safari/","chrome/" 五个字符串;
  • Windows版Opera:
    特征表现:以"opera/"开头,含有"windows nt","presto/" 字符串;
    判断方法:粗略判断只检索 "windows nt"和"opera/"字符串,严格判断同时检索 "opera/","windows nt" 和 "presto/";
  • Windows版Safari:
    特征表现:以"mozilla/"开头,同时含有"windows nt","applewebkit/","safari/";
    判断方法:粗略判断可以检索含有 "windows nt","safari/" 同时不包含 "chrome/",严格判断需要同时含有"mozilla/","windows nt","applewebkit/","safari/"但是不包含"chrome/";  
  • 小结:Windows操作系统上的浏览器userAgent均包含"windows nt"字符串来表征windows操作系统。


iPhone平台浏览器系列:
  • iPhone自带safari:
    特征表现:以"mozilla/"开头,含有"iphone"字符串,同时含有 "mobile/","safari/"字符串;
    判断方法:粗略判断只检索 "iphone"和"safari/"字符串,严格判断则要同时包含 "mozilla/","iphone","mobile/","safari/"四个字符串
  • iPhone版Opera Mobile:
    特征表现: 以"opera/"开头,含有"iphone"字符串,同时含有 "opera mini/","presto/"字符串;
    判断方法:粗略判断只检索 "iphone"和"opera/"字符串,严格判断则要同时包含 "opera/","iphone","opera mini/","presto/"四个字符串
  • 小结:iPhone手机上的浏览器userAgent均包含"iphone"字符串


Android平台浏览器系列:
  • Android自带浏览器(有人说其实是就chrome,但google自己未做表示,且还在开发一个Android上运行的Chrome to Phone):
    特征表现: 以"mozilla/"开头,含有"android"和"linux" 字符串,同时含有 "applewebkit/","mobile safari/"字符串;
    判断方法:因为还不知道Android上未来会不会有独立的safari(估计不会了),所以建议直接严格判断,检索 "mozilla/","android","linux","applewebkit/","mobile safari/"五个字符串
  • Android版Opera Mobile:
    特征表现: 以"opera/"开头,含有"android"和"linux" 字符串,同时含有 "opera mobi/","presto/"字符串;
    判断方法:粗略判断只检索 "android"和"opera/",严格判断则要同时包含"opera/","android","linux","opera mobi/","presto/"五个字符串
  • Android版Firefox:
    特征表现:以"mozilla/"开头,含有"android"和"linux" 字符串,同时含有 "firefox/","gecko/","fennec/"字符串; 
    判断方法:粗略判断只检索 "android"和"firefox/",严格判断则要同时包含"mozilla/","android","linux","firefox/","gecko/","fennec/"六个字符串 
  • 小结:Android平台上的浏览器userAgent均包含"android"和"linux"字符串


      以上对windows、iphone、android三大平台的主流浏览器解析就基本结束了,其他平台的linux估计至少与android平台应该类似,而采用了Mac OS的iPad和麦金塔应该与iphone平台类似,故而暂时先不做解析,也因为手头没有那么多设备和操作系统来测试,希望日后能够补上。


      现在的网站产品开发要求跟以前又不一样了,因为不仅要满足电脑浏览,还需要满足用户通过智能手机(这里仅指iphone、android、windows phone等真正的智能手机,blackberry和palm这样的小众半智能系统暂时不考虑,至于symbian这个伪智能系统就一边玩去吧)通过以上三个具有代表性的平台,也大致可以推测出根据浏览器userAgent判断用户设备的解决方案了。


1、如果需要判断操作系统,方法比较简单,在userAgent里面检索以下字符串:
  • 含有"windows nt":显而易见了,windows操作系统,nt后面的版本号可以判断OS版本;
  • 含有"mac":苹果的Mac OS X或者其他Mac OS内核的系统;
  • 含有"iphone":苹果iphone手机专有的,一般情况下也应该含有"mac";
  • 含有"ipad":苹果iPad平板电脑(资料表明iPad的浏览器userAgent同时含有"mac","iphone","ipad");
  • 含有"linux":Linux操作系统或者其他以linux作为内核的操作系统;
  • 含有"android":谷歌的Android操作系统,有可能是智能手机,也有可能是安卓版的平板电脑哦,一般情况下android平台上的userAgent也应该包含"linux";
  • 含有"unix","sunos","bsd"三者之一:Unix系统,其实对这个系统的用户体验问题,目前几乎可以不用考虑了;
  • 含有"ubuntu":ubuntu定制版的linux
  • ……
你也看到了,判断操作系统及其版本其实并不一直有用,但总有能用到的地方,比如开发专门针对iphone、ipad、android等设备屏幕分辨率的页面


2、判断浏览器的内核,方法也不困难,我自己琢磨出来的,不一定都对啊:
  • IE(Trident)内核(IE for Mac, IEs4Linux之类的就不用说了,只考虑windows下的):以"mozilla/"开头,含有"windows nt"和"msie"字符串;
  • Firefox(Gecko)内核:以"mozilla/"开头,含有"firefox/"和"gecko/"字符串的就是啦,其中Android版的还带有"fennec/"字符串;
  • Opera()内核:以"opera/"开头,含有"presto/"字符串,其中iphone版还带有"opera mini/",Android版也带有"opera mobi/";
  • Webkit内核:以"mozilla/"开头,含有"applewebkit/"和"safari/"字符串,其中带有"chrome/"的就是Chrome浏览器,不带的就是Safari或其他;
  • 以上就是主要的浏览器内核了
      浏览器内核才是解决兼容性的关键问题所在,然而,这个兼容性问题已经有jQuery和Extjs等框架帮你解决了,因此这个判断只针对个别页面的CSS样式在不同内核渲染效果不同的情况下使用,当然了,同样的内核在智能手机和电脑等不同设备上渲染结果也不同,这一点也需要注意。


3、判断浏览器useAgent的实际应用举例:
  • 不同浏览器内核对页面的渲染效果不同,虽然已经有jQuery和Extjs等为我们做了兼容处理,但是依然会有一些细小的差别需要我们单独处理,此时需要判断浏览器内核;
  • 用户并不仅仅是通过电脑访问网站的,随着智能手机的日益普及还有平板电脑的大行其道,使用这两者来上网的比例越来越高,怎么办?平板电脑还好,屏幕大分辨率高,智能手机受限于他的屏幕尺寸和分辨率,虽有强劲的处理能力,也可以完美支持现有的网站,但是为客户多考虑一点总没有坏处你说对吧?毕竟通过局部缩放拖拽的方式看网页很不舒服,这时呢,我们就可以专门为iphone、android这样的窄条屏幕提供一个专用版本来布局了,一来提升浏览体验,二来降低网络流量,加快访问速度;
  • 做访客流量分析,通过判断客户浏览器类型并记录其数量,来优化设计自己的网站,以分别提升其客户体验
  • ……
分享到:
评论

相关推荐

    JS通过分析userAgent属性来判断浏览器的类型及版本

    本文对浏览器各自的userAgent特点做一分析,并给出判断方法: Windows操作系统浏览器系列: IE浏览器系列: 特征表现:均以 “mozilla/” 开头,”msie x.0;” 中的x表示其版本; 判断方法:粗略判断可以只检索 ...

    js chrome浏览器判断代码

    对于浏览器类型的判断,除了Chrome之外,其他的浏览器如IE、Firefox、Safari等也有各自独特的属性或方法。开发者可以根据需要编写相应的检测函数,以覆盖所有主流浏览器。例如,判断用户使用的是IE6还是IE7,可以...

    原生js仿jq判断当前浏览器是否为ie,精确到ie6~8

    在这段代码中,作者首先使用了正则表达式对`navigator.userAgent`属性进行匹配,从而判断出当前浏览器是否为IE浏览器以及它的版本。`navigator.userAgent`是一个字符串,它包含关于访问者的浏览器类型、版本、浏览器...

    jQuery 判断是否移动端访问.docx

    另一种常见的方法是通过分析用户的`User Agent`字符串来判断。`User Agent`是HTTP请求头的一部分,其中包含了客户端操作系统和浏览器的信息。我们可以通过查找特定的关键字来判断是否为移动设备。 **代码示例**: `...

    jquery1.9 下检测浏览器类型和版本的方法

    随着浏览器厂商对浏览器内核的不断更新,一些原有的判断方法可能逐渐失效,因此开发者应持续关注浏览器的最新动态,并更新自己的检测逻辑。 最后,开发中需要注意,过度依赖浏览器检测可能会导致代码复杂度上升,...

    js 多浏览器分别判断代码

    在实现这一功能时,通常会利用JavaScript中的`navigator.userAgent`对象来获取浏览器的用户代理字符串(User-Agent),然后通过一系列的字符串匹配操作来检测不同的浏览器。 以下是对这些检测逻辑的详细解释: 1. ...

    js判断客户端是iOS还是Android等移动终端的方法

    本文所述的方法通过分析userAgent字符串,并结合JavaScript提供的浏览器对象属性来判断客户端是否为iOS、Android等移动终端,以及其浏览器的类型和版本。掌握这些知识点对于前端开发人员来说是必要的,它有助于针对...

    基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统

    通过一系列的判断和赋值操作,该函数能够检测并区分不同的浏览器引擎、版本、平台和操作系统。 通过这些知识点,我们可以了解到,JavaScript不仅仅用于网页的动态交互,同样也是分析和获取客户端信息的重要工具。...

    javascript常用代码

    通过`window.open`方法,并设置相应的属性如宽度、高度、滚动条等,可以实现在浏览器中全屏打开一个页面。文件中的示例代码展示了如何根据屏幕可用尺寸动态调整打开页面的大小。 ### 3. XML文档的初始化和处理 在...

    iOS和Android用同一个二维码实现跳转下载链接的方法

    本文将详细介绍如何使用同一个二维码,使得iOS和Android用户扫描后能够分别跳转到各自平台的下载链接。这种技术对于营销和用户体验优化具有重要意义,因为它简化了用户获取应用的过程。 首先,我们需要理解实现这一...

Global site tag (gtag.js) - Google Analytics