JS判断手机浏览器

判断原理：

JavaScript是前端开发的主要语言，我们可以通过 编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属性来分辨，另 一种是通过分析浏览器的userAgent属性来判断的。在许多情况下，值判断出浏览器类型之后，还需判断浏览器版本才能处理兼容性问题，而判断浏览器的 版本一般只能通过分析浏览器的userAgent才能知道。

浏览器类型

⑴浏览器特有属性

⑵根据userAgent

浏览器版本

⑴根据userAgent

对于手机浏览器判断

1.如何判断是否为移动终端 利用正则match，

匹配navigator.userAgent是否含有字符串AppleWebKit*****Mobile

安卓qq浏览器HD版 只有AppleWebKit

使用navigator.browserLanguage 便可得出windows phone语言版本，

当然可恶的小小手机语言版本也有兼容性的差异，兼容Mozilla，以及AppleWebKit内核的浏览器访问其语言版本，它会列出 navigator.language

<a href="http://www.cnblogs.com/phphuaibei/archive/2011/12/09/2282570.html#">?</a>

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

32

<code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>/*</code>

<code>* 智能机浏览器版本信息:</code>

<code>*</code>

<code>*/</code>

<code>  </code><code>var</code> <code>browser={</code>

<code>    </code><code>versions:</code><code>function</code><code>(){</code>

<code>           </code><code>var</code> <code>u = navigator.userAgent, app = navigator.appVersion;</code>

<code>           </code><code>return</code> <code>{</code><code>//移动终端浏览器版本信息</code>

<code>                </code><code>trident: u.indexOf(</code><code>'Trident'</code><code>) &gt; -1,</code><code>//IE内核</code>

<code>                </code><code>presto: u.indexOf(</code><code>'Presto'</code><code>) &gt; -1,</code><code>//opera内核</code>

<code>                </code><code>webKit: u.indexOf(</code><code>'AppleWebKit'</code><code>) &gt; -1,</code><code>//苹果、谷歌内核</code>

<code>                </code><code>gecko: u.indexOf(</code><code>'Gecko'</code><code>) &gt; -1 &amp;&amp; u.indexOf(</code><code>'KHTML'</code><code>) == -1,</code><code>//火狐内核</code>

<code>                </code><code>mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/),</code><code>//是否为移动终端</code>

<code>                </code><code>ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),</code><code>//ios终端</code>

<code>                </code><code>android: u.indexOf(</code><code>'Android'</code><code>) &gt; -1 || u.indexOf(</code><code>'Linux'</code><code>) &gt; -1,</code><code>//android终端或者uc浏览器</code>

<code>                </code><code>iPhone: u.indexOf(</code><code>'iPhone'</code><code>) &gt; -1 || u.indexOf(</code><code>'Mac'</code><code>) &gt; -1,</code><code>//是否为iPhone或者QQHD浏览器</code>

<code>                </code><code>iPad: u.indexOf(</code><code>'iPad'</code><code>) &gt; -1,</code><code>//是否iPad</code>

<code>                </code><code>webApp: u.indexOf(</code><code>'Safari'</code><code>) == -1</code><code>//是否web应该程序，没有头部与底部</code>

<code>            </code><code>};</code>

<code>         </code><code>}(),</code>

<code>         </code><code>language:(navigator.browserLanguage || navigator.language).toLowerCase()</code>

<code>}</code>

<code>document.writeln(</code><code>"语言版本: "</code><code>+browser.language);</code>

<code>document.writeln(</code><code>" 是否为移动终端: "</code><code>+browser.versions.mobile);</code>

<code>document.writeln(</code><code>" ios终端: "</code><code>+browser.versions.ios);</code>

<code>document.writeln(</code><code>" android终端: "</code><code>+browser.versions.android);</code>

<code>document.writeln(</code><code>" 是否为iPhone: "</code><code>+browser.versions.iPhone);</code>

<code>document.writeln(</code><code>" 是否iPad: "</code><code>+browser.versions.iPad);</code>

<code>document.writeln(navigator.userAgent);</code>

<code>&lt;/script&gt;</code>

比较特别的地方

UC浏览器没有安卓报头，只返回：linux ，这里粗略的根据linux来判断是安卓（前提必须满足是移动终端，UC这点是满足的）

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

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

参考文章：

Pc浏览器

<a href="http://www.jb51.net/article/17302.htm">http://www.jb51.net/article/17302.htm</a>

http://www.bairuiw.com/front-end-skill/1346.html

手机浏览器

<a href="http://www.iundefined.com/development/344.html">http://www.iundefined.com/development/344.html</a>

http://www.cnblogs.com/dowinning/archive/2011/07/22/2113747.html

<a href="http://www.cnblogs.com/dowinning/archive/2011/07/22/2113981.html">http://www.cnblogs.com/dowinning/archive/2011/07/22/2113981.html</a>

http://luckerme.com/archives/1015.html

原文：

http://www.cnblogs.com/phphuaibei/archive/2011/12/09/2282570.html