說到手機端自適應，這真的是現代網站設計中不可或缺的一環。記得我最近幫客戶評估一個基於PbootCMS開發的模板時，就深刻體會到這一點。那套模板號稱「自適應手機端」，但實際測試後發現，在某些舊款手機上排版會跑掉，圖片比例也變得怪怪的。這讓我忍不住思考，所謂的「自適應」真的只是讓內容在手機上顯示出來這麼簡單嗎？顯然不是！
螢幕尺寸與解析度的適應挑戰
你知道嗎？光是2023年市面上就有超過200種不同的手機螢幕尺寸，從4吋的老舊機型到7吋的摺疊螢幕都有。這就帶來了第一個要點：響應式斷點（breakpoint）的設定不能只依賴預設值。很多設計師會直接套用Bootstrap的標準斷點，但其實應該根據實際用戶數據來調整。比如說，如果你的網站主要用戶還在用較小的手機，那麼在360px以下的適配就顯得特別重要。
觸控操作與互動設計
說到觸控，這可是手機體驗的核心啊！我有次在測試網站時發現，某個按鈕在桌機上完美運作，到了手機上卻怎麼點都點不到——原來是觸控目標太小了。根據Google的建議，觸控目標至少要44×44像素，而且間距要足夠，免得用戶誤觸。另外，懸停效果（hover）在手機上根本無效，這點經常被忽略，導致某些互動功能在手機端完全失靈。
圖片和媒體內容的處理也是個大學問。曾經看過一個案例，某電商網站因為沒有使用響應式圖片，導致手機用戶要載入3MB的大圖，不僅耗流量，載入速度也慢得讓人想直接離開。後來他們改用srcset屬性，根據不同設備提供合適的圖片尺寸，跳出率立刻下降了18%。這說明了什麼？自適應不僅是排版問題，更是性能優化的關鍵。
字體與閱讀體驗的細部調整
字體大小的設定經常被低估其重要性。在手機上閱讀時，16px應該是最小尺寸，行高也要調整到1.4-1.6之間，這樣在移動狀態下才不容易看錯行。我發現很多網站直接沿用桌機的字體設定，結果在手機上字小得要用放大鏡才看得清。說真的，與其追求花俏的字体，不如先把可讀性做好。
最後想說的是，自適應設計不是一次性的工作，而是持續優化的過程。每個月都應該檢視網站在不同設備上的表現，特別要注意那些跳出率特別高的頁面——很可能就是自適應出了問題。畢竟在這個人手一機的時代，如果網站在手機上體驗不佳，等於直接把一半以上的潛在用戶拒於門外啊！
評論（9）
這篇講太到位了，舊手機排版崩潰真的常見 😔
觸控目標至少44px，沒做到的網站根本反人類
想問如果不用Bootstrap，自己定義斷點要怎麼測試比較好？
現在連摺疊螢幕都要考慮，設計師頭都大了 🤯
圖片用srcset真的差超多，我之前沒加，流量暴增三倍
自適應不是切版就好，根本是行為模式重設計吧？
說到字小就氣，有些網站在手機上看像在做視力檢查⋯⋯
作者寫太好了！快出續集，我想看更多實戰案例～👏
每個月檢視設備表現這點很受用，馬上安排進SOP