js判斷PC端與移動端跳轉(zhuǎn)

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

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

在網(wǎng)上看到很多這樣類似的代碼，但是有的很復雜，或者有的沒有判斷完全，上次經(jīng)理去見完客戶回來講，使用蘋果瀏覽打開pc端（pc已經(jīng)做了識別跳轉(zhuǎn)）會自動跳轉(zhuǎn)到移動端的網(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://www.dhdzp.com" + 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內(nèi)核
  presto: u.indexOf('Presto') > -1, //opera內(nèi)核
  webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內(nèi)核
  gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內(nèi)核
  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)址";
 }
};

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

您可能感興趣的文章:

Safari 中 filter: blur() 高斯模糊引發(fā)的性能問題及解決方案
在Safari瀏覽器中使用CSS濾鏡如filter:blur()時,可能會遇到性能問題,如頁面卡頓和小方塊現(xiàn)象,這些問題通常與渲染機制和硬件加速的缺失有關,通過開啟硬件加速,如使用transform:translate3d(0,0,0),可以有效解決這些問題,并提升用戶體驗
2024-10-10
Layui實現(xiàn)多條件查詢的示例代碼
本文主要介紹了Layui實現(xiàn)多條件查詢，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-12-12
動態(tài)的綁定事件addEventListener方法的使用
本文為大家介紹下動態(tài)的綁定事件的方法addEventListener的使用示例，不了解的朋友可以參考下
2014-01-01
JavaScript 直接操作本地文件的實現(xiàn)代碼
Chrome、IE和Firefox都紛紛在新版中增強了JavaScript引擎的執(zhí)行效率，隨著JavaScript效率在各大瀏覽器的顯著提高，JavaScript可以做越來越多的事，本地文件API的引入將讓很多有趣的功能成為現(xiàn)實。
2009-12-12
微信小程序日歷插件代碼實例
這篇文章主要介紹了微信小程序日歷插件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-12-12
JavaScript常用工具函數(shù)匯總（瀏覽器環(huán)境）
這篇文章主要匯總了JavaScript常用的工具函數(shù)，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-09-09
小程序tab頁無法傳遞參數(shù)的方法
這篇文章主要介紹了小程序tab頁無法傳遞參數(shù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
淺談HBuilderX開發(fā)小程序的一些問題
本文主要介紹了HBuilderX開發(fā)小程序的一些問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
JS動態(tài)獲取當前時間,并寫到特定的區(qū)域
JS動態(tài)獲取當前時間,并寫到特定的區(qū)域，需要的朋友可以參考一下
2013-05-05
JS實現(xiàn)根據(jù)URL批量下載文件并壓縮成zip文件
這篇文章主要為大家學習介紹了JS如何實現(xiàn)根據(jù)URL批量下載文件并壓縮成zip文件，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下
2023-08-08