`
sanshizi
  • 浏览: 84846 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

根据userAgent值的特性判断客户端设备及浏览器类型

阅读更多
文章写的太好了, 直接转了
原文链接:http://www.cnblogs.com/dowinning/archive/2011/07/22/2113981.html



前文《Web开发兼容性系列文章(一):不同设备浏览器的userAgent值大全》罗列了常用电脑浏览器及智能手机浏览器的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这样的窄条屏幕提供一个专用版本来布局了,一来提升浏览体验,二来降低网络流量,加快访问速度;
    做访客流量分析,通过判断客户浏览器类型并记录其数量,来优化设计自己的网站,以分别提升其客户体验
    ……


分享到:
评论

相关推荐

    判断浏览器类型(判断浏览器类型)

    在网页开发中,判断浏览器类型是一项重要的任务,因为不同的浏览器可能会有不同的兼容性问题。了解用户正在使用的浏览器可以帮助开发者针对性地优化网站,确保在各种环境下都能提供良好的用户体验。本文将详细介绍...

    Javascript 判断客户端浏览器类型代码

    本文将介绍如何使用JavaScript来判断客户端浏览器的类型,以及如何获取客户端的一些基本信息。 首先,我们来看如何判断浏览器类型。在给出的代码示例中,使用了两种方法来检测浏览器类型。第一种方法(详细方法1)...

    最新浏览器useragent

    浏览器UserAgent字符串是每个网页请求时,客户端(通常是浏览器)发送到服务器的一段信息,用于标识客户端的类型、版本、操作系统、设备等详细信息。在分析用户行为、优化网站兼容性或者开发网络爬虫时,了解和理解...

    JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)

    JavaScript中检测客户端类型的详细知识点包括了对访问网页的用户代理字符串UA的分析,以此来确定访问者的浏览器、平台、操作系统、移动设备以及游戏系统等信息。下面详细讲述这些知识点: 1. 用户代理字符串UA:UA...

    JS判断是否在微信浏览器打开

    1. **应用场景**:这种技术主要应用于需要根据不同设备或浏览器特性调整页面显示或行为的情况,比如引导用户使用更合适的浏览器下载应用、优化移动端用户体验等。 2. **兼容性问题**:需要注意的是,由于不同版本的...

    js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码

    从给定的文件信息中,我们可以提取以下关于使用JavaScript进行客户端浏览器类型判断以及根据判断结果跳转官网或手机网站的知识点: 1. 用户代理(User-Agent)字符串的解析和匹配是客户端浏览器类型判断的关键。...

    Useragentanalysistool用户代理分析工具浏览器类型信息

    用户代理字符串是浏览器在向服务器发送HTTP请求时附带的一种信息,它包含了关于客户端(通常是浏览器)的详细信息,如浏览器类型、版本、操作系统、设备类型等。在JavaScript开发中,理解和解析用户代理字符串对于...

    手机useragent.pdf 数据库资源

    2. **广告推送**:广告平台可以根据UserAgent识别用户的设备类型和品牌,进而推送更符合该设备特性的广告,提高广告的点击率和转化率。 3. **统计分析**:UserAgent数据可用于分析用户行为模式,如哪款手机访问频率...

    通过JS和PHP两种方法判断用户请求时使用的浏览器类型

    使用JavaScript判断浏览器类型,我们可以编写一段脚本来检测浏览器的UserAgent,从而判断是否为微信内置浏览器。具体方法如下所示: ```javascript function is_weixin() { var ua = navigator.userAgent....

    js 客户端检测

    在JavaScript的世界里,客户端检测是开发Web应用时不可或缺的一部分,它可以帮助我们了解用户正在使用的设备、浏览器特性,以便实现更好的兼容性和用户体验。这篇博客“js客户端检测”可能深入探讨了如何利用...

    ASP.NET2.0 c# 获取浏览器,IP,URL,操作系统

    在ASP.NET 2.0与C#环境下,获取客户端浏览器信息、IP地址、访问URL以及操作系统类型是常见的需求,尤其在日志记录、数据分析或安全验证等场景中尤为重要。以下是对给定代码片段中涉及的关键知识点进行的详细解析: ...

    动态加载Css 浏览器判断

    在提供的压缩包文件中,`Browes 判断.asp`和`Browes 浏览器判断.asp`可能是用于服务器端进行浏览器检测的ASP文件,而`CheckBr(动态加载Css).js`可能是用于客户端JavaScript动态加载CSS并进行浏览器判断的脚本。...

    JS判断浏览器类型与版本的实现代码

    在实际开发中,由于不同浏览器对某些特性的支持程度和实现方式可能存在差异,因此,开发者经常需要检测用户使用的浏览器类型及版本,以便提供兼容性解决方案。本文将详细介绍如何通过JavaScript来判断浏览器类型及...

    jquery插件推荐浏览器嗅探userAgent

    在当今网络开发中,用户代理(User-Agent)字符串被广泛用于网站和应用程序以识别客户端所使用的浏览器、操作系统、版本等信息。这在进行浏览器兼容性测试、用户体验优化以及访问统计分析等场景中非常关键。虽然...

    巧用 UserAgent 代替拙劣的 CSS hack

    在网页开发中,CSS(层叠样式表)是用于控制页面布局和样式的语言,而UserAgent则是一个浏览器向服务器发送的字符串,包含了浏览器的类型、版本等信息。标题“巧用 UserAgent 代替拙劣的 CSS hack”指出了一种避免...

    判断是否是手机访问及手机操作系统

    标题中的“判断是否是手机访问及手机操作系统”指的是在编程中如何识别用户的访问设备是否为移动设备,并进一步确定其使用的操作系统。这在Web开发中尤为关键,因为网站或应用程序需要根据用户设备的不同特性来提供...

    navigator-检测浏览器版本-javascript

    JavaScript 提供了 `navigator` 对象来帮助开发者获取客户端浏览器的相关信息,包括浏览器的版本号等重要数据。下面将详细介绍如何使用 `navigator` 对象来检测浏览器版本以及其他相关信息。 #### 一、`navigator` ...

    Js如何判断客户端是PC还是手持设备简单分析

    在JavaScript编程中,判断客户端是个人计算机(PC)还是手持设备(如智能手机或平板电脑)是一种常见的需求。这主要应用于响应式网页设计、设备特定功能的实现或是优化用户体验。下面我们将详细探讨如何使用...

    js判断浏览器的环境(pc端,移动端,还是微信浏览器)

    这将根据用户设备和浏览器类型显示相应的提示信息。 总的来说,利用JavaScript的`navigator.userAgent`对象,我们可以准确地检测用户是使用PC、移动设备还是微信浏览器进行访问,并据此调整网页的行为和展示,提供...

    浏览器检测的多种方式-javascript代码

    通过上述方法,我们可以有效地检测出用户的浏览器类型及版本,并根据浏览器的特性选择合适的事件绑定方式。然而,需要注意的是,虽然`User-Agent`字符串可以提供关于浏览器的信息,但它并不是一个可靠的检测方法,...

Global site tag (gtag.js) - Google Analytics