javascript 辨識手機並跳到手機網站 並可回到電腦版

在現今的行動網路時代，越來越多的使用者喜歡透過手機瀏覽網頁。因此，針對不同設備提供適配的網站已經成為了必然趨勢。在此背景下，如何實現讓用戶輕鬆地在電腦版和手機版之間切換成為了關鍵。

其中，透過 Javascript 程式碼識別使用者使用的設備，並自動跳到對應的適配版網站，是比較常用的方法。接下來，本文將介紹此方法的實作過程。

一、偵測設備類型

知道使用者使用的是哪一種設備，是判斷是否需要跳到手機版的前提。為此，需要在 Javascript 中透過 navigator.userAgent 屬性取得使用者的裝置資訊。

範例程式碼如下：

// 判断是否为移动设备
function isMobile() {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

透過此函數，可以偵測出使用者是否使用的是行動裝置。如果測試結果為 true，就表示使用者正在使用一個行動設備，需要跳到手機版網站。

二、跳到手機版網站

如果偵測結果顯示使用者正在使用一個行動設備，那麼需要將使用者重新導向到手機版網站。

具體方法如下：

if (isMobile()) {
   window.location.href = "http://m.example.com";
}

在該程式碼中，判斷使用者是否為行動裝置的方法呼叫了上述的isMobile() 函數，如果滿足條件，則將使用者重定向到手機版網站。這裡的 redirectUrl 需要替換為實際的手機版網站 URL。

三、回到電腦版網站

為了用戶方便，需要在手機版網站中提供一個鏈接，讓用戶可以「回到電腦版網站」。在實現這個功能的時候，同樣需要透過 Javascript 程式碼進行檢測使用者的設備類型。如果使用者正在使用 PC 設備，那麼就需要將使用者重新導向到電腦版網站。

範例程式碼如下：

// 判断是否为 PC 设备
function isPC() {
   return !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// 点击“回到电脑版网站”时，跳转到电脑版网站
$("#returnToPC").click(function(){
   if (isPC()) {
       window.location.href = "http://www.example.com";
   }
});

程式碼中，「回到電腦版網站」連結被綁定了一個點擊事件，當使用者點擊這個連結時，在偵測到使用者正在使用PC 裝置後，將使用者重新導向至對應的電腦版網站。

總結

如上所述，在Javascript 中識別使用者裝置類型並跳到對應適配版網站，以及提供回到電腦版網站的功能，是許多網站實作跨平台瀏覽的基礎。在實際使用中，需要根據不同的業務需求進行最佳化和拓展，才能更好地滿足使用者的需求。

以上是javascript 辨識手機並跳到手機網站 並可回到電腦版的詳細內容。更多資訊請關注PHP中文網其他相關文章！