快捷導(dǎo)航

基于JS實(shí)現(xiàn)移動(dòng)端訪問PC端頁(yè)面時(shí)跳轉(zhuǎn)到對(duì)應(yīng)的移動(dòng)端網(wǎng)頁(yè)

更新時(shí)間：2020年12月24日 21:07:53 作者：jerrylsxu

不想通過CSS自適應(yīng)在PC端和移動(dòng)端分別顯示不同的樣式，那么只能通過在移動(dòng)端訪問PC端網(wǎng)頁(yè)時(shí)跳轉(zhuǎn)到對(duì)應(yīng)的移動(dòng)端網(wǎng)頁(yè)了，那么怎么跳轉(zhuǎn)呢，網(wǎng)上也有很多文章說明，以下實(shí)現(xiàn)思路經(jīng)過小編測(cè)試過，需要的朋友可以參考下

不想通過CSS自適應(yīng)在PC端和移動(dòng)端分別顯示不同的樣式，那么只能通過在移動(dòng)端訪問PC端網(wǎng)頁(yè)時(shí)跳轉(zhuǎn)到對(duì)應(yīng)的移動(dòng)端網(wǎng)頁(yè)了，那么怎么跳轉(zhuǎn)呢，網(wǎng)上也有很多文章說明，以下實(shí)現(xiàn)思路經(jīng)過小編測(cè)試過，放心使用。

1.效果圖

PC端訪問顯示：

移動(dòng)端訪問顯示：

2.實(shí)現(xiàn)：

不考慮移動(dòng)端搜索引擎優(yōu)化的話，只需要通過JS判斷是否移動(dòng)端，然后確定是否跳轉(zhuǎn)到指定頁(yè)面就行了，主要JS如下：

//判斷是否移動(dòng)端，如果是則跳轉(zhuǎn)到指定的URL地址
function browserRedirect(url) {
//只讀的字符串，聲明了瀏覽器用于 HTTP 請(qǐng)求的用戶代理頭的值
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
window.location.replace(url);
}
}

然后在頁(yè)面引用JS，調(diào)用方法就行了：

<script src="../js/wap.js"></script>
<script type="text/javascript">browserRedirect("http://ycdoit.com/test/testmobile.html");</script>

腳本之家友情提醒：大家可以用PC端和移動(dòng)端訪問測(cè)試頁(yè)面演示效果哦!

下面腳本之家小編為大家分享幾個(gè)常用的

pc自動(dòng)跳移動(dòng)端

(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) {}
        }
      }
    })();

移動(dòng)端自動(dòng)跳pc

;(function() {
  var reWriteUrl = function(url) {
    if (url) {
      var Splits = url.split("/"),
      siteName = window.location.pathname;
      if (typeof siteName !== "undefined") {
        return "http://www.dbjr.com.cn" + 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) {}
    }
  }
})();

關(guān)于本文給大家介紹的基于JS實(shí)現(xiàn)移動(dòng)端訪問PC端頁(yè)面時(shí)跳轉(zhuǎn)到對(duì)應(yīng)的移動(dòng)端網(wǎng)頁(yè)就給大家介紹這么多，希望對(duì)大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

無間斷滾動(dòng)marquee的詳細(xì)用法解析
無間斷滾動(dòng)marquee的詳細(xì)用法解析...
2006-08-08
強(qiáng)大的JavaScript響應(yīng)式圖表Chartist.js的使用
本篇文章主要介紹了強(qiáng)大的JavaScript響應(yīng)式圖表Chartist.js的使用，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-09-09
基于JavaScript實(shí)現(xiàn)十五拼圖代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)十五拼圖代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-04-04
JS利用prototype給類添加方法操作詳解
這篇文章主要介紹了JS利用prototype給類添加方法操作,結(jié)合實(shí)例形式分析了javascript使用prototype實(shí)現(xiàn)給類添加方法的相關(guān)操作技巧,需要的朋友可以參考下
2019-06-06
js實(shí)現(xiàn)html table 行,列鎖定的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)html table 行,列鎖定的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
JavaScript代碼執(zhí)行的先后順序問題
今天就給大家介紹一個(gè)特別基礎(chǔ)的東西，javascript中函數(shù)的一點(diǎn)兒小知識(shí)之js代碼的執(zhí)行順序問題，需要的朋友參考下吧
2017-10-10
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖拽進(jìn)度條改變?cè)赝该鞫?，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10