2021年4月16日 星期五

如何切換桌上型網頁與行動網頁

上個月湘雲老師委託我幫她設計個人網站, 以便放置客家話語音處理研究資料, 但前陣子我還在忙自己的進度沒時間動手, 只協助填寫學校的一些申請表單而已, 一個月過去也該著手處理了. 先構思網站架構, 弄出雛形了再遠端連線安裝伺服器.

由於現在使用手機比使用電腦上網的頻率來得高, 所以初步決定桌上型以及行動網頁分開, 桌上型可能使用 jQuery UI 或 Bootstrap, 行動網頁則使用 jQuery Moble. 也有可能全部使用 Bootstrap 來做. 先實驗一下分開的做法, 即連線首頁時要能自動分辨客戶端所使用之裝置, 以決定要切換到桌上型還是行動網頁. 

我參考了下面這兩篇文章 : 

JS判斷使用者用PC還是手機來瀏覽網頁

解決方案其實很簡單, 就是使用正規式去比對 navigator.userAgent 屬性值是否含有 "Android", "iPhone" 或 "iPad" 等字串來判定客戶端為行動裝置. 作者的設想周密, 列了非常多行動裝置種類, 但現在市場就是 Android 與 iOS 的天下, 所以我覺得不需要那麼多, 只要考慮 Android 與 iOS 系統就好. 網站首頁 index.htm 可以這麼寫 :

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Test</title>
</head>
<body>
  <script>
    if (navigator.userAgent.match(/Android/i)|| 
       navigator.userAgent.match(/iPhone/i) ||
       navigator.userAgent.match(/iPad/i)) {
      window.location.href="mobile/index.htm";
      }
    else {window.location.href="desktop/index.htm";}
  </script>
</body>
</html>

做法就是呼叫字串的 match() 方法去比對正規式, 若含有 "Android", "iPhone" 或 "iPad" 等字串就將 location 物件的 href 屬性設為位於 mobile 子目錄下的行動網頁首頁 index.htm, 其內容為 :

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Test</title>
</head>
<body>
  這是行動首頁
  <script>
  </script>
</body>
</html>

否則網頁就導至 desktop 子目錄下的桌上型網站首頁 index.htm, 其內容為 :

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Test</title>
</head>
<body>
  這是桌上型首頁
  <script>
  </script>
</body>
</html>

整個網站的目錄結構如下 :




我將雛型架構上傳到 GitHub 網站測試可正常切換桌上型與行動網頁 :


我分別用三星 Note8, iPad2, 以及筆電瀏覽器存取結果如下 : 


三星 Note8 Chrome 瀏覽器


蘋果 iPhone 8 Safari 瀏覽器


蘋果 iPad2 Safari 瀏覽器



Acer Swift 5 Chrome 瀏覽器

沒有留言 :