H5案例分享:使用JS判斷客戶端、瀏覽器、操作系統類型


 

使用JS判斷客戶端、瀏覽器、操作系統類型

 

一、JS判斷客戶端類型

  JS判斷客戶端是否是iOS或者Android手機移動端

  通過判斷瀏覽器的userAgent,用正則來判斷手機是否是ios和Android客戶端。

核心代碼如下:

方法一:

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isAndroid) {
  alert('這是Android');
}
if (isiOS) {
  alert('這是IOS');
}

 

掃碼體驗:

 

方法二:

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
  //alert(navigator.userAgent);
  alert('這是IOS');
} else if (/(Android)/i.test(navigator.userAgent)) {
  //alert(navigator.userAgent);
  alert('這是Android');
} else {
  alert('這是PC');
};

掃碼體驗:

 

二、JS檢測是否在微信打開

   使用js 可以通過 window.navigator.userAgent 來獲取瀏覽器的相關信息,那么我們也可以通過該方法來獲取微信內置瀏覽器的相關信息。根據關鍵字 MicroMessenger 來判斷是否是微信內置的瀏覽器。

核心代碼如下:

function is_weixn(){
  var ua = navigator.userAgent.toLowerCase();
  if(ua.match(/MicroMessenger/i)=='micromessenger') {
    alert('在微信里打開');
  } else {
     alert('不在微信里打開');
  }
}
is_weixn();

掃碼體驗:

三、JS判斷操作系統類型

   在通過Javascript實現客戶端和服務端的交互時,有時候需要對操作系統進行判斷,以便實現不同操作系統下的兼容性,比如:我們有一個網站, 在Windows下瀏覽效果良好,但是到了Linux下,由於許多特性不同,會造成在瀏覽上的細微差異,甚至會影響到良好的用戶體驗。這個時候我們就需要利用 Javascript對操作系統的類型以及某些特性進行判斷,分而治之,從而實現網站在跨平台瀏覽時候保持良好的用戶體驗。

下邊是對Windows、Mac、Linux、Unix擦作系統進行判斷的JS核心代碼:

function detectOS() {
  var sUserAgent = navigator.userAgent;
  var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
  var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
  if (isMac) return "Mac";
  var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
  if (isUnix) return "Unix";
  var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
  if (isLinux) return "Linux";
  if (isWin) {
    var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 ||sUserAgent.indexOf("Windows 2000") > -1;
    if (isWin2K) return "Win2000";
    var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
    if (isWinXP) return "WinXP";
    var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
    if (isWin2003) return "Win2003";
    var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
    if (isWinVista) return "WinVista";
    var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
    if (isWin7) return "Win7";
  }
   return "other";
}

alert("您的操作系統是:" + detectOS());


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM