RWD 上線前的五個檢查點

網站做完不代表做好了。同一個頁面在設計師的 27 吋螢幕上完美無瑕，到了客戶的手機上卻可能慘不忍睹。以下是我們每個案子交付前必跑的 RWD 檢查清單，每一條都是踩過坑換來的。

1. 斷點行為

不要只看 375px 和 1920px 兩個極端，中間尺寸（平板直橫向、小筆電）最容易出問題：

寬度	常見裝置	常見問題
768px	iPad 直向	選單切換點、欄位擠壓
1024px	iPad 橫向	桌機版面過早出現
1366px	小筆電	大圖裁切、字級過大

實務上我們會用瀏覽器開發者工具從 320px 一路拖到 1920px，觀察每個版面轉換點是否自然。特別注意文字換行造成的按鈕高度不一、卡片高度參差這類細節——使用者說不出哪裡怪，但就是感覺不專業。

2. 觸控目標大小

按鈕與連結的可點擊範圍至少 44×44px（Apple 官方建議值），相鄰目標之間留 8px 以上間距。最常見的違規者是導航列的小連結和表單旁的小圖示——滑鼠點得到，不代表拇指點得到。

3. 圖片載入策略

<img src="/images/hero.webp" loading="lazy" width="800" height="500" alt="..." />

• 首屏之外一律 loading="lazy"，行動網路下能省下大量流量
• 標明 width / height 避免版面跳動（CLS），這也是 Google 排名指標之一
• 優先使用 WebP 格式，檔案大小通常比 JPEG 小三成以上

4. 橫向捲動檢查

任何寬度下都不應出現水平捲軸。常見兇手：固定寬度的表格、超出容器的長網址、100vw 加上 padding。抓法很簡單——在開發者工具的 Console 貼上一行程式找出超寬元素：

[...document.querySelectorAll('*')].filter(e => e.scrollWidth > document.body.clientWidth)

5. 真機測試

模擬器抓不到的問題：iOS Safari 的 100vh 會被網址列吃掉、安卓鍵盤彈出時視窗高度變化導致版面跳動、iOS 的橡皮筋捲動效果讓固定元素抖動。上線前至少用一支 iPhone、一支 Android 實測，特別是表單填寫流程——那是轉換率發生的地方，也是行動裝置上最容易出狀況的地方。