JS判断客户端是否是iOS或者Android或者ipad（二）

js判断客户端是IPAD和iphone

多了就不说了，直接上代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

function checkIsIphoneIpad() { var pda_user_agent_list = new Array("iPhone", "iPod", "iPad"/*, "GTB"*/); var pda_app_name_list = new Array("Microsoft Pocket Internet Explorer"); //来自www.chhua.com var user_agent = navigator.userAgent.toString(); for (var i=0; i<pda_user_agent_list.length; i++) { if (user_agent.indexOf(pda_user_agent_list[i]) >= 0) { return true; } } var appName = navigator.appName.toString(); for (var i=0; i<pda_app_name_list.length; i++) { if (user_agent.indexOf(pda_app_name_list[i]) >= 0) { return true; } }   return false; }

 

 

JavaScript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属性来分辨，另 一种是通过分析浏览器的userAgent属性来判断的

JavaScript是前端开发的主要语言，我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属性来分辨，另 一种是通过分析浏览器的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这样的窄条屏幕提供一个专用版本来布局了，一来提升浏览体验，二来降低网络流量，加快访问速度；
做访客流量分析，通过判断客户浏览器类型并记录其数量，来优化设计自己的网站，以分别提升其客户体验

复制代码 代码如下:

<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

//以下进行测试
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
</script>
或:
KindEditor开源编辑器源码中的检测浏览器的方法:
KE = {};
KE.browser = (function () {
var ua = navigator.userAgent.toLowerCase();
return {
VERSION:ua.match(/(msie|firefox|webkit|opera)[\/:\s](\d+)/) ? RegExp.$2 : "0",
IE:(ua.indexOf("msie") > -1 && ua.indexOf("opera") == -1),
GECKO:(ua.indexOf("gecko") > -1 && ua.indexOf("khtml") == -1),
WEBKIT:(ua.indexOf("applewebkit") > -1),
OPERA:(ua.indexOf("opera") > -1)
};
})(); 

我们可以通过userAgent来判断，比如检测某些关键字，例如：AppleWebKit*****Mobile或AppleWebKit，需要注意的是有些浏览器的userAgent中并不包含AppleWebKit关键字，可能会是Linux,UCBrowser等等。

1.Javascript

2. PHP

3. .NET (C#)

下面是Javascript代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<script type="text/javascript"> /* * 智能机浏览器版本信息: */ var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器 iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQ HD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部 }; }(), language:(navigator.browserLanguage || navigator.language).toLowerCase() }   document.writeln("语言版本: "+browser.language); document.writeln(" 是否为移动终端: "+browser.versions.mobile); document.writeln(" ios终端: "+browser.versions.ios); document.writeln(" android终端: "+browser.versions.android); document.writeln(" 是否为iPhone: "+browser.versions.iPhone); document.writeln(" 是否iPad: "+browser.versions.iPad); document.writeln(navigator.userAgent); </script>

下面是通过检测关键字判断是不是手机在访问的PHP代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<?php /** * 判断是否是通过手机访问 * @return bool 是否是移动设备 */ public function isMobile() { //判断手机发送的客户端标志 if(isset($_SERVER['HTTP_USER_AGENT'])) { $userAgent = strtolower($_SERVER['HTTP_USER_AGENT']); $clientkeywords = array( 'nokia', 'sony', 'ericsson', 'mot', 'samsung', 'htc', 'sgh', 'lg', 'sharp', 'sie-' ,'philips', 'panasonic', 'alcatel', 'lenovo', 'iphone', 'ipod', 'blackberry', 'meizu', 'android', 'netfront', 'symbian', 'ucweb', 'windowsce', 'palm', 'operamini', 'operamobi', 'opera mobi', 'openwave', 'nexusone', 'cldc', 'midp', 'wap', 'mobile' ); // 从HTTP_USER_AGENT中查找手机浏览器的关键字 if(preg_match("/(".implode('|',$clientkeywords).")/i",$userAgent)&&strpos($userAgent,'ipad') === false) { return true; } } return false; }

下面的jsp代码简单判断浏览器类型，如果是iphone或者android就跳转到手机版本网页:

1 2 3 4 5 6 7 8 9

<% String ua = request.getHeader("User-Agent") ; if (ua != null) { if (ua.indexOf("iPhone") >-1 || ua.indexOf("iPad") >-1 || (ua.indexOf("ndroid") >-1 && ua.indexOf("WebKit") >-1)) { response.sendRedirect("http://localhost/mobile"); return ; } } %>

下面是.NET代码(C#)
在.NET下，其中一个方法是利用HttpBrowserCapabilities，代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

System.Web.HttpBrowserCapabilities browser = Request.Browser; string s = "Browser Capabilities\n" + "Type = " + browser.Type + "\n" + "Name = " + browser.Browser + "\n" + "Version = " + browser.Version + "\n" + "Major Version = " + browser.MajorVersion + "\n" + "Minor Version = " + browser.MinorVersion + "\n" + "Platform = " + browser.Platform + "\n" + "Is Beta = " + browser.Beta + "\n" + "Is Crawler = " + browser.Crawler + "\n" + "Is AOL = " + browser.AOL + "\n" + "Is Win16 = " + browser.Win16 + "\n" + "Is Win32 = " + browser.Win32 + "\n" + "Supports Frames = " + browser.Frames + "\n" + "Supports Tables = " + browser.Tables + "\n" + "Supports Cookies = " + browser.Cookies + "\n" + "Supports VBScript = " + browser.VBScript + "\n" + "Supports JavaScript = " + browser.EcmaScriptVersion.ToString() + "\n" + "Supports Java Applets = " + browser.JavaApplets + "\n" + "Supports ActiveX Controls = " + browser.ActiveXControls + "\n" + "Supports JavaScript Version = " + browser["JavaScriptVersion"] + "\n";

在web.config中需要在filter中进行匹配

1 2 3

<system.web> <browserCaps> <use var="HTTP_USER_AGENT" /> <filter> <case match="Windows NT 6.1"> platform=Windows7 </case> </filter> </browserCaps> </system.web>

另外一个方法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

///<summary> /// 根据 Agent 判断是否是智能手机 ///</summary> ///<returns></returns> public static bool CheckAgent() { bool flag = false;   string agent = HttpContext.Current.Request.UserAgent; string[] keywords = { "Android", "iPhone", "iPod", "iPad", "Windows Phone", "MQQBrowser" };   //排除 Windows 桌面系统 if (!agent.Contains("Windows NT") || (agent.Contains("Windows NT") && agent.Contains("compatible; MSIE 9.0;"))) { //排除 苹果桌面系统 if (!agent.Contains("Windows NT") && !agent.Contains("Macintosh")) { foreach (string item in keywords) { if (agent.Contains(item)) { flag = true; break; } } } }   return flag; }

代码解释：

1. !agent.Contains("Windows NT") && !agent.Contains("Macintosh") 排除Window 桌面系统 和 苹果桌面系统

2. "Android", "iPhone", "iPod", "iPad", "Windows Phone", "MQQBrowser" 这些是判断智能设备Agent中的关键词

3. MQQBrowser 为 QQ 手机浏览器，QQ 手机的Agent 比较特殊，所以单独判断

各移动浏览器的http user-agent:

一、微信的http user-agent(关键词MicroMessenger)

1. Iphone(苹果)平台微信的ucweb的useragent：
Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B176 MicroMessenger/4.3.2

2. Android(安卓)平台微信的ucweb的useragent：1
Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5660 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 MicroMessenger/4.5.255

二、UC浏览器的http user-agent(关键词UCWEB)

1. android平台:
android平台ucweb急速模式开启下ucweb浏览器useragent： 
UCWEB/2.0 (Linux; U; Adr 2.3; zh-CN; MI-ONEPlus) U2/1.0.0 UCBrowser/8.6.0.199 U2/1.0.0 Mobile

android平台ucweb急速模式关闭状态下的http_user_agent:
Mozilla/5.0 (Linux; U; Android 2.3; zh-CN; MI-ONEPlus) AppleWebKit/534.13 (KHTML, like Gecko) UCBrowser/8.6.0.199 U3/0.8.0 Mobile Safari/534.13

2. iPhone 平台

iPhone 平台极速模式开启状态下ucweb浏览器useragent： 
UCWEB/2.0 (iOS; U; iPh OS 4_3_2; zh-CN; iPh4) U2/1.0.0 UCBrowser/8.6.0.199 U2/1.0.0 Mobile

iPhone 平台极速模式关闭状态下 UA 示例如下：（OBUA 为自带浏览器 UA）\
OBUA UCBrowser/8.6.0.199 Mobile

3. iPad 平台
ipad平台下ucweb浏览器useragent：
Mozilla/5.0 (iPad; U; CPU OS 6_0 like Mac OS X; zh-CN; iPad2) AppleWebKit/534.13 (KHTML, like Gecko) UCBrowser/8.6.0.199 U3/0.8.0 Safari/534.13

4. windows Phone平台
WP平台下ucweb浏览器useragent：
WP平台极速模式开启状态下：（以 Nokia 900 为例）
UCWEB/2.0 (Windows; U; wds7.10; zh-CN; Nokia 900) U2/1.0.0 UCBrowser/8.6.0.199 U2/1.0.0 Mobile

5. 诺基亚平台
诺基亚手机Symbian&Java平台ucweb浏览器useragen：
Nokia 5800 XpressMusic/UCWEB8.9.0.253/50/999

安卓QQ浏览器HD版检测的结果是：mac， Safari，这个很是变态，自己看着处理吧

3个检测浏览器User-Agent信息的网站

三、一些特别的浏览器
QQ浏览器(android)
MQQBrowser/3.6/Adr (Linux; U; 4.0.3; zh-cn; HUAWEI U8818 Build/U8818V100R001C17B926;480*800)

魅族UC浏览器(android)
JUC (Linux; U; 2.3.5; zh-cn; MEIZU MX; 640*960) UCWEB8.5.1.179/145/33232

UC浏览器(iphone)
IUC(U;iOS 5.1;Zh-cn;320*480;)/UCWEB8.8.0.212/42/997

Opera mobile(android)
Opera/9.80 (Android 4.0.3; Linux; Opera Mobi/ADR-1210241554) Presto/2.11.355 Version/12.10

Opera mini(iphone)
Opera/9.80 (iPhone; Opera Mini/7.0.5/28.2690; U; zh) Presto/2.8.119 Version/11.10

三个在线网站，通过手机浏览器就可以在线检测

1. http://whatsmyuseragent.com/

2. http://whatsmyua.com/

3. http://www.useragentstring.com/