【Javascript Demo】移動端訪問PC端網頁時跳轉到對應的移動端網頁

不想通過CSS自適應在PC端和移動端分別顯示不同的樣式，那么只能通過在移動端訪問PC端網頁時跳轉到對應的移動端網頁了，那么怎么跳轉呢，網上也有很多文章說明，下面是本人測試有效的方式。

1.效果圖

PC端訪問顯示：

移動端訪問顯示：

 

2.實現：

不考慮移動端搜索引擎優化的話，只需要通過JS判斷是否移動端，然后確定是否跳轉到指定頁面就行了，主要JS如下：

//判斷是否移動端，如果是則跳轉到指定的URL地址
function browserRedirect(url) {
    //只讀的字符串，聲明了瀏覽器用於 HTTP 請求的用戶代理頭的值
    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);
    }
}

然后在頁面引用JS，調用方法就行了：

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

 

PS：大家可以用PC端和移動端訪問 測試頁面 查看效果。