方法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

转载于:https://www.cnblogs.com/kingreatwill/p/4073362.html

js判断移动终端(手机浏览器)相关推荐

  1. PHP和js判断访问终端是否是微信浏览器手机还是电脑

    2019独角兽企业重金招聘Python工程师标准>>> js判断是否是微信浏览器 function is_weixin() { var ua = window.navigator.u ...

  2. js判断是否在微信浏览器中打开

    js判断是否在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroM ...

  3. Js判断是否在微信浏览器中打开和微信版本号

    一.判断微信版本号 var wechatInfo = navigator.userAgent.match(/MicroMessenger\\/([\\d\\.]+)/i) ; if( !wechatI ...

  4. js 判断是什么类型浏览器

    一.js 判断是什么类型浏览器 // firefox if ( window.sidebar && "object" == typeof( window.sideb ...

  5. 原生js判断iPhoneX系列手机型号

    #原生js判断iPhoneX系列手机型号 static isIphone() {return /iphone/gi.test(window.navigator.userAgent)}static is ...

  6. js判断是否是手机访问网页

    原理:原理有两个,第一:通过游览器(browser)判断是否是手机:第二:通过访问终端判断是否是手机(userAgent):但是通常考虑到兼容性,需要这两种原理同时使用:具体的实现如下: functi ...

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

    之前懒得写判断ie版本js,因为网上关于这方面的代码太多了,所以从网上拷贝了一个,放到项目上才发现由于时效性的问题,代码不生效.就自己写一个吧. 怎么去看浏览器的内核等信息 ---- js的全局对象w ...

  8. php 判断浏览器是ie,js判断是否是ie浏览器

    怎么去看浏览器的内核等信息 ---- js的全局对象window子属性navigator.userAgent,这个属性是包含了浏览器信息的相关信息,包括我们需要的浏览器内核 navigator.use ...

  9. 过http user-agent判断是否为手机浏览器

    我们做Web开发的时候,常常需要判断用户是否是使用手机访问网站,从而决定如何页面任何展示给用户,以提高用户体验,这时需要用到判断浏览器类型的代码: 下面PHP函数可以根据http user-agent ...

  10. php 判断是否为安卓,通过http user-agent判断是否为手机浏览器

    我们做Web一很等指似很一者下插近直好一的的有段文,开发的时候,常常需要判断用户是否是使用手机访问网站,从而决定如何页面任何展示给用户,以提高用户体验,这时需要用到判断浏览器类型的代码调代求学功解宗维 ...

最新文章

  1. 在CentOS 6.3 64bit上安装MySQL for python模块
  2. 三星s轻奢android+p,三星Galaxy S轻奢版5月21日将至:骁龙660处理器+安卓8.0
  3. 解决SWFUpload在Chrome、Firefox浏览器下session找不到的问题
  4. CSS的三种定位,成功入职字节跳动
  5. java中如何将JScrollPane的垂直滚动条自动移动到最下端
  6. Android上实现柱状图表
  7. LeetCode--226--翻转二叉树
  8. NoSQL数据库原理与应用
  9. LeetCode 55 - 跳跃游戏
  10. 虚拟机 Bochs新版本试用DOS、UCDOS、Win3.2 -- Bochs 2.6.11于2020年1月5日发布!
  11. android ip计算,子网掩码怎么算_ipv6子网掩码计算器_掩码计算器android
  12. 助你提高PS效率的32个常用快捷键及对应作用
  13. 2017 追梦 远方
  14. 学习方法之08克服拖延症,及时快速地完成任务
  15. WEB页面登陆管理 H3C设备
  16. Istio和Linkerd基准性能测试对比
  17. sigset 与 signal的区别?
  18. 疫情过后:表面一切照旧,暗里风起云涌!
  19. Odoo免费开源ERP高级实施个性化定制请假单示例教程
  20. 【我,不止于此】TCL电子泛智屏BU研发中心2021届春季校招来袭!

热门文章

  1. 文件服务器均衡负载,文件服务器均衡负载
  2. CityMaker学习教程14 水面图层的创建
  3. 写给在校的GISER
  4. 51单片机:静态数码管详细教程
  5. Aizu1367 Rearranging a Sequence 模拟|签到
  6. 图解+原理推导完全读懂KPM算法
  7. IMF: Interactive Multimodal Fusion Model for Link Prediction
  8. 单片机看门狗工作原理
  9. Git详解之必知点----Git、本地仓库、远程仓库、IDEA集成Git
  10. matlab中sign函数的使用(提取符号)