JS使用userAgent判断操作系统和浏览器类型

1、应用场景：

在做ios和android应用时，需要扫码进行应用的下载，可以通过扫描一个二维码，然后跳到指定的页面，页面中使用js判断操作系统和浏览器类型，然后给出不同的下载地址。这样就可以实现android手机直接下载，iphone手机跳转到app store。windows直接下载apk，mac跳转到app store。

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 Terminal = {// 辨别移动终端类型platform : function(){var u = navigator.userAgent, app = navigator.appVersion;return {// android终端或者uc浏览器android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,// 是否为iPhone或者QQHD浏览器iPhone: u.indexOf('iPhone') > -1 ,// 是否iPadiPad: u.indexOf('iPad') > -1 ,// 是否为windowswindows: u.indexOf('Windows NT') > -1 ,// 是否为macmac: u.indexOf('Mac')};}(),// 辨别移动终端的语言：zh-cn、en-us、ko-kr、ja-jp...language : (navigator.browserLanguage || navigator.language).toLowerCase()}// 根据不同的终端，跳转到不同的地址var theUrl = '默认地址';if(Terminal.platform.android || Terminal.platform.windows){theUrl = 'android和windows下载地址';//theUrl = '${request.getContextPath()}/download/android';}else if(Terminal.platform.iPhone || Terminal.platform.mac){theUrl = 'iphone和mac下载地址';}else{alert("不支持的操作系统，默认下载Android平台");}location.href = theUrl;
</script>

JS使用userAgent判断操作系统和浏览器类型相关推荐

js判断操作系统与浏览器
摘要: 对于前端开发我们最重要的工作就是兼容性,系统的兼容性,浏览器的兼容性等等.今天分享一个我在项目中封装的判断操作系统与浏览器的方法. 操作系统: var os = (function() {va ...
js获取用户的操作系统和浏览器版本的方法
让IE支持placeholder属性通过window.location获得URL的信息 js获取用户的操作系统和浏览器版本的方法 2013-07-17 15:12:11| 分类: 工作 | ...
nginx 手机版页面判断_nginx通过user-agent判断是否手机浏览器的方法
nginx通过user-agent判断是否手机浏览器的方法,这在检测通过手机浏览pc页面然后跳转到手机页面时很有用. user-agent相关知识: http://www.developershome ...
vue封装的全屏js 禁止键盘事件获取当前浏览器类型获取当前的屏幕宽高
开启全屏 export function fullScreen(){var el = document.documentElement,rfs = el.requestFullScreen || el ...
js判断设备、浏览器类型
function getAppVersion(){ var browser = { versions: function () { var u = navigator.userAgent, app = ...
JavaScript判断操作系统与浏览器
判断操作系统 var os = (function() {var UserAgent = navigator.userAgent.toLowerCase();return {isIpad : /ipa ...
JS_js判断当前是否是微信浏览器，判断移动端浏览器类型，微信浏览器、支付宝小程序、微信小程序等
判断当前是否是微信浏览器 var ua = navigator.userAgent.toLowerCase(); var isWeixin = ua.indexOf('micromessenger') ...
JS判断当前的浏览器类型
<script type="text/javascript">//window.navigator.userAgent.indexOf("MSIE" ...
PHP判断客户端的浏览器类型
转载链接:http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0516/13461.html #判断浏览器语言: if ($_SERVER ...

JS使用userAgent判断操作系统和浏览器类型

JS使用userAgent判断操作系统和浏览器类型相关推荐

最新文章

热门文章