js判斷PC端與移動端跳轉

更新時間：2020年12月24日 21:05:53 作者：叫我小龍哥

本文主要介紹了js判斷PC端與移動端跳轉的方法，具有很好的參考價值。下面跟著小編一起來看下吧

在網(wǎng)上看到很多這樣類似的代碼，但是有的很復雜，或者有的沒有判斷完全，上次經(jīng)理去見完客戶回來講，使用蘋果瀏覽打開pc端（pc已經(jīng)做了識別跳轉）會自動跳轉到移動端的網(wǎng)頁去，后來經(jīng)測試才發(fā)現(xiàn)

document.writeln(" 是否為移動終端: "+browser.versions.mobile+"</br>"); //打印出來 true

所以在完整版的代碼中第一層if 判斷一直是true

以上的原因是因為，網(wǎng)上流傳的判斷為：

mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/), //是否為移動終端

判斷不完整才會造成這種原因。

下面腳本之家小編為大家分享網(wǎng)站常用的判斷代碼

pc自動跳移動端

(function() {
      if (/Android|webOS|iPhone|iPad|Windows Phone|iPod|BlackBerry|SymbianOS|Nokia|Mobile|Opera Mini/i.test(navigator.userAgent)) {
        var siteName = window.location.pathname;
        if (url.indexOf("?pc") < 0) {
          try {
				if (typeof siteName !== "undefined") {
            	window.location. + siteName
          		} 
          } catch (e) {}
        }
      }
    })();

移動端自動跳pc端

;(function() {
  var reWriteUrl = function(url) {
    if (url) {
      var Splits = url.split("/"),
      siteName = window.location.pathname;
      if (typeof siteName !== "undefined") {
        return "http://m.fzitv.net" + siteName
      }
    }
  };
  if (!/Android|webOS|iPhone|iPad|Windows Phone|iPod|BlackBerry|SymbianOS|Nokia|Mobile|Opera Mini/i.test(navigator.userAgent)) {
    var url = window.location.href;
    var pathname = window.location.pathname;
    if (url.indexOf("?m") < 0) {
      try {
        window.location.href = reWriteUrl(url)
      } catch(e) {}
    }
  }
})();

正確的判斷應該為：

mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0, //是否為移動終端

測試程序代碼

var browser = {
 versions: function() {
 var u = navigator.userAgent;
 return {
  trident: u.indexOf('Trident') > -1,
  presto: u.indexOf('Presto') > -1,
  webKit: u.indexOf('AppleWebKit') > -1,
  gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
  mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,
  ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
  iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
  iPad: u.indexOf('iPad') > -1,
  webApp: u.indexOf('Safari') == -1
 }
 } (),
 language:(navigator.browserLanguage || navigator.language).toLowerCase()
};
document.writeln("語言版本: "+browser.language+"</br>");
document.writeln(" 是否為移動終端: "+browser.versions.mobile+"</br>");
document.writeln(" ios終端: "+browser.versions.ios+"</br>");
document.writeln(" android終端: "+browser.versions.android+"</br>");
document.writeln(" 是否為iPhone: "+browser.versions.iPhone+"</br>");
document.writeln(" 是否iPad: "+browser.versions.iPad+"</br>");
document.writeln(navigator.userAgent+"</br>");

完整版，運用于項目代碼

/*
*
* 判斷PC端與WAP端
*/
var mobile_bs = {
 versions: function() {
 var u = navigator.userAgent;
 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.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0, //是否為移動終端
  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應該程序，沒有頭部與底部
 }
 } ()
};
if (mobile_bs.versions.mobile) {
 if (mobile_bs.versions.android || mobile_bs.versions.iPhone || mobile_bs.versions.iPad || mobile_bs.versions.ios) {
 window.location.href = "移動端網(wǎng)址";
 }
};

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: