在跨平台、瀏覽器、移動設備兼容的時候,要根據設備、瀏覽器做特定調整,所以我們經常會用到navigator.userAgent.toLowerCase()來進行判斷。
先來解釋一下意思,navigator是HTML中的內置對象,包含瀏覽器的信息;userAgent是navigator的屬性方法,可以返回由客戶機發送服務器的頭部的值,作用其實就是就是返回當前用戶所使用的是什么瀏覽器,toLowerCase()是將轉換為小寫。
區分Android、iphone、ipad:
- var ua = navigator.userAgent.toLowerCase();
- if (/android|adr/gi.test(ua)) {
- // 安卓
- }else if(/\(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(ua)){
- //蘋果
- }else if(/iPad/gi.test(ua)){
- //ipad
- }
有些軟件是內置的瀏覽器,比如新浪微博、騰訊QQ(非QQ瀏覽器)和微信
(微信在6.0.2版本的時候做了改動,微信的分享功能在新版本跟以前不一樣了)為了兼容版本,要做以下操作:
注:新浪微博為1,QQ客戶端為2,微信低於6.0.2版本為3,高於6.0.2版本為4,其他為0。
- var ua = navigator.userAgent.toLowerCase();
- if(ua.match(/weibo/i) == "weibo"){
- console.log(1);
- }else if(ua.indexOf('qq/')!= -1){
- console.log(2);
- }else if(ua.match(/MicroMessenger/i)=="micromessenger"){
- var v_weixin = ua.split('micromessenger')[1];
- v_weixin = v_weixin.substring(1,6);
- v_weixin = v_weixin.split(' ')[0];
- if(v_weixin.split('.').length == 2){
- v_weixin = v_weixin + '.0';
- }
- if(v_weixin < '6.0.2'){
- console.log(3);
- }else{
- console.log(4);
- }
- }else{
- console.log(0);
- }
區分各個瀏覽器:
- var ua=navigator.userAgent.toLowerCase();
- if(/msie/i.test(ua) && !/opera/.test(ua)){
- alert("IE");
- return ;
- }else if(/firefox/i.test(ua)){
- alert("Firefox");
- return ;
- }else if(/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua)){
- alert("Chrome");
- return ;
- }else if(/opera/i.test(ua)){
- alert("Opera");
- return ;
- }else if(/iPad/i){
- alert("ipad");
- return ;
- }
- if(/webkit/i.test(ua) &&!(/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua))){
- alert("Safari");
- return ;
- }else{
- alert("unKnow");
- }
chrome中:navigator.userAgent的值:
其實navigator.userAgent 也有bug,
在IOS中,時間的顯示格式一般是 '2016/11/11 11:11:11' ,所以對於安卓的'2016-11-11 11:11:11',是不適用於IOS的。
因此,我們用下面的代碼去判斷安卓系統,
- <span style="font-size:18px;">var isAdr = new Date('2016-11-11 11:11:11').getTime() > 0;</span>
版權聲明:本文為博主原創文章,未經博主允許不得轉載。