通過Mobile訪問時加載Mobile Version，否則加載Desktop Version

Question

有人能解釋我如何調用手機時只能調用網站的移動版本，而當我訪問大於500px的所有內容時如何稱呼網站的桌面版本嗎？

我分別創建了一個移動網站和一個桌面網站。 是否可以使用jQuery檢查寬度，然后調用移動版或桌面版？

我這樣嘗試過

在我的桌面版本上：

<link rel="alternate" media="only screen and (max-width: 500px)" href="../FolderPath/index.html" >

在我的移動版上：

<link rel="canonical" href="../FolderPath/index.html">

但我認為我完全錯了。

希望有人可以幫助我，在此先感謝:)

Answer 1

如果屏幕尺寸小於500像素，則可以使用JavaScript檢測屏幕尺寸並將用戶重定向到移動網站

 <script type="text/javascript">
    if (screen.width <= 500) {
        document.location = "mobile/index.html";
    }
 </script>