上個月湘雲老師委託我幫她設計個人網站, 以便放置客家話語音處理研究資料, 但前陣子我還在忙自己的進度沒時間動手, 只協助填寫學校的一些申請表單而已, 一個月過去也該著手處理了. 先構思網站架構, 弄出雛形了再遠端連線安裝伺服器.
由於現在使用手機比使用電腦上網的頻率來得高, 所以初步決定桌上型以及行動網頁分開, 桌上型可能使用 jQuery UI 或 Bootstrap, 行動網頁則使用 jQuery Moble. 也有可能全部使用 Bootstrap 來做. 先實驗一下分開的做法, 即連線首頁時要能自動分辨客戶端所使用之裝置, 以決定要切換到桌上型還是行動網頁.
我參考了下面這兩篇文章 :
解決方案其實很簡單, 就是使用正規式去比對 navigator.userAgent 屬性值是否含有 "Android", "iPhone" 或 "iPad" 等字串來判定客戶端為行動裝置. 作者的設想周密, 列了非常多行動裝置種類, 但現在市場就是 Android 與 iOS 的天下, 所以我覺得不需要那麼多, 只要考慮 Android 與 iOS 系統就好. 網站首頁 index.htm 可以這麼寫 :
<!JS判斷使用者用PC還是手機來瀏覽網頁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>
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 瀏覽器
沒有留言 :
張貼留言