js判断移动终端（手机浏览器）

方法1：

<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.*/) , //是否为移动终端

                    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或者QQHD浏览器

                    iPad: u.indexOf(‘iPad‘) > -1, //是否iPad

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

                };

            }(),

            language: (navigator.browserLanguage || navigator.language).toLowerCase()

        }

        if (browser.versions.mobile == true || browser.versions.ios == true || browser.versions.android == true) {

            if (confirm("检测到您是移动终端！是否跳转至手机版？"))

            {

                window.location.href = "http://3geas.huat.edu.cn";

            }

        }

    </script>

二：

 <script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script>

<script type="text/javascript">uaredirect("http://www.163.com");</script>

方法如下：

function uaredirect(f){try{if(document.getElementById("bdmark")!=null){return}var b=false;if(arguments[1]){var e=window.location.host;var a=window.location.href;if(isSubdomain(arguments[1],e)==1){f=f+"/#m/"+a;b=true}else{if(isSubdomain(arguments[1],e)==2){f=f+"/#m/"+a;b=true}else{f=a;b=false}}}else{b=true}if(b){var c=window.location.hash;if(!c.match("fromapp")){if((navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i))){location.replace(f)}}}}catch(d){}}function isSubdomain(c,d){this.getdomain=function(f){var e=f.indexOf("://");if(e>0){var h=f.substr(e+3)}else{var h=f}var g=/^www\./;if(g.test(h)){h=h.substr(4)}return h};if(c==d){return 1}else{var c=this.getdomain(c);var b=this.getdomain(d);if(c==b){return 1}else{c=c.replace(".","\\.");var a=new RegExp("\\."+c+"$");if(b.match(a)){return 2}else{return 0}}}};

P.S.

前文《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这样的窄条屏幕提供一个专用版本来布局了，一来提升浏览体验，二来降低网络流量，加快访问速度；
  • 做访客流量分析，通过判断客户浏览器类型并记录其数量，来优化设计自己的网站，以分别提升其客户体验

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

时间： 2024-08-06 09:01:03

js判断移动终端（手机浏览器）的相关文章

JS判断设备终端（PC，iPad，iPhone，android，winPhone）和浏览器

var ua = navigator.userAgent; var browser = {}, weixin = ua.match(/MicroMessenger\/([^\s]+)/i), webkit = ua.match(/WebKit\/([\d.]+)/i), android = ua.match(/(Android)\s+([\d.]+)/i), ipad = ua.match(/(iPad).*OS\s([\d_]+)/i), ipod = ua.match(/(iPod).*OS

PHP和js判断访问终端是否是微信浏览器

js判断是否是微信浏览器 function is_weixin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { $("#rs").text("微信浏览器"); } else { $("#rs").text("不是微信浏览器"); } } PHP判断是否是微信

JS判断是否是IE浏览器的几种方式

1.得到浏览器的信息,返回由客户机发送服务器的 user-agent 头部的值. if(navigator.userAgent.indexOf("MSIE 8.0")>0){ IE }else{ 非IE } 注:MSIE 8.0---->IE8浏览器 MSIE 7.0---->IE7浏览器 .............. 2.字节判断 if("\v"=="v") // 这个判断真的只有在IE下才为真,包括IE 8. {IE} el

js 判断当前的手机系统类型

<script language="javascript"> window.onload = function () { alert("1"); var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机alert("安卓手机"); // window.location.href = "

[JavaScript] js判断是否在微信浏览器中打开

用JS来判断了,经过查找资料终于实现了效果, function is_weixn(){     var ua = navigator.userAgent.toLowerCase();     if(ua.match(/MicroMessenger/i)=="micromessenger") {         return true;     } else {         return false;     } } 通过测试完全通过,无论是android 还是iphone,ipad

js判断是否为手机访问

JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的.在许多情况下,值判断出浏览器类型之后,还需判断浏览器版本才能处理兼容性问题,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道. 根据userAgent判断是否为手机访问 C# 代码   复制 function checkBrowser(){ var browser={ versions:function(){ var u = navi

js判断是否是ie浏览器且给出ie版本

之前懒得写判断ie版本js,因为网上关于这方面的代码太多了,所以从网上拷贝了一个,放到项目上才发现由于时效性的问题,代码不生效.就自己写一个吧. 怎么去看浏览器的内核等信息 ---- js的全局对象window子属性navigator.userAgent,这个属性是包含了浏览器信息的相关信息,包括我们需要的浏览器内核 navigator.userAgent这个值取出来是个字符串,可以通过string的 indexOf方法或者正则匹配来验证关键字符串 ie11和edge的判断方式有所不同,后面我会

JS判断在哪一端浏览器打开

<script src="js/jquery-2.2.3.min.js"></script> <script> var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto

通过js判断微信内置浏览器跳转到外部浏览器打开

在涉及移动端微信推广的项目时,由于对推广需求的精细化,不仅需要推广效率,还有始终保证域名在微信中的正常状态,我们解决方案在微信.QQ.支付宝内置浏览器给出相应的提示. function is_neizhi() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return "weixin"; } else if (u