響應式設計交付的時候，怎麼驗收才不算走過場？多數人的驗收是「手機打開看一眼，沒跑版就通過」。這篇給一份能逐項打勾的 RWD 手機端檢查清單，按順序跑完大約四十分鐘，能擋掉大部分上線後才發現的問題。
先講為什麼值得認真驗。Google 用行動版內容做索引，手機端的品質直接影響搜尋表現；Core Web Vitals 三項指標也以行動端野外數據為準，官方門檻 LCP ≤2.5s、INP ≤200ms、CLS ≤0.1（web.dev Core Web Vitals）。一個響應式網站設計如果只在桌面端完美，等於只交了一半。
驗收前：把環境備齊
- 一台實體 Android、一台實體 iPhone——模擬器看不出字體渲染和觸控的差異。
- 桌面瀏覽器的開發者工具切裝置模式，用來快速掃斷點。
- 弱網測試：開發者工具限速到 Slow 4G，看頁面在慢網下的形態。
檢查清單：七個區塊
1. Viewport 與斷點
手機開頁面，如果字很小、需要左右縮放，多半是 viewport 標籤缺失或寫死寬度。接著在三個寬度各截一張圖：375（小手機）、768（平板直立）、1200 以上（桌面）。每個斷點下的版面都應該是「重排」而不是「縮小」——元素換位置合理，圖片自適應寬度。
2. 觸控目標
按鈕、選單、表單控制項的點擊區域在手機上要夠大，太近的目標會互相誤觸。實測方法：用拇指操作，任何需要「瞄準」才能點中的元素都算不合格。選單展開後的子項目間距也要檢查，這是誤觸重災區。
3. 字級與行長
手機正文低於 16px 讀起來費力，行長超過螢幕寬度的九成會讓眼睛換行累。檢查每個文字區塊：標題層級在手機上是否還有視覺落差，段落會不會擠成一團。
4. 圖片與媒體
圖片要隨容器縮放、不留白邊或溢出。重點查兩類：輪播圖在小螢幕上的裁切是否把主體切掉；背景圖上的文字在窄屏是否還讀得清。這也是效能的源頭——我們看過一個站的產品頁模板放了一張 15MB 首圖，幾百個產品頁的速度指標全數不及格，伺服器本身沒有問題。RWD 驗收時順手看一張產品圖的實際檔案大小，超過 500KB 就要問原因。
5. 表格與表單
寬表格在手機上有兩種死法：撐破版面出現橫向捲動，或字縮到看不見。合理的處理是改卡片式或允許局部橫滑。表單則要實際填一遍：輸入框focus 時頁面會不會自動推齊、選單彈出是否正常、送出後的回饋訊息看得見嗎。表單是詢價的最後一哩，這裡的任何不順都直接吃掉轉換。
6. 互動式網頁元素的行動端取捨
動畫、視差捲動、hover 效果這類互動式網頁元素，在桌面上是加分項，在手機上經常變成負擔：效能消耗大、觸控沒有 hover、網路慢時動畫卡頓反而顯得不專業。驗收標準很簡單——每個動效在 Slow 4G 下都要麼流暢、要麼優雅降級成靜態。做不到的，砍掉。
7. 固定元素與跳轉
底部固定的詢價按鈕不能蓋住正文最後一行；錨點跳轉要考慮固定選單的高度，不然標題會被遮住。這類小問題用清單掃一遍，五分鐘就能全部確認。
8. 分享預覽
手機上被分享出去的連結，第一眼是通訊軟體裡的預覽卡。檢查 og 標題、描述、縮圖在手機的顯示：縮圖沒設會被抓成頁面裡隨機一張圖，描述缺字會直接影響點擊意願。這項嚴格說不屬於 RWD，但手機端驗收時順手測一次，成本三十秒。
9. 效能預算
最後給頁面立一條紅線：行動端首屏總載入不超過多少 MB、圖片單張不超過多少 KB，寫進驗收單。響應式網站設計最容易退化的地方就是資源——每次改版加一張圖、多一個效果，半年後速度回到原點。有預算數字，退化會在驗收時被抓到，而不是上線後被訪客用跳出率告訴你。
驗收記錄怎麼留
每個問題截圖、標註裝置與寬度、按清單編號歸檔。交付文件裡的問題清單是下次改版的基準線——沒有記錄的驗收，三個月後誰也說不清當時查過什麼。我們長期維護 30–40 個外貿獨立站，這套流程跑下來，手機端問題的復發率明顯低於「看一眼就通過」的做法。
小結
RWD響應式網站的驗收不是形式，是把手機端當成主要戰場來對待。清單九項：viewport 與斷點、觸控目標、字級行長、圖片媒體、表格表單、互動元素降級、固定元素、分享預覽、效能預算。跑完打勾，才叫交付。想了解響應式怎麼做的完整面，看RWD 響應式網頁實作指南；速度面的深度排查，搭配外貿獨立站的響應速度優化；整體網頁設計流程見網頁設計完整流程。
常見問題
響應式設計和另外做一個手機版網站一樣嗎？
不一樣。RWD 是同一套網址、同一份內容依螢幕寬度自適應；獨立手機版是另一套網址，維護成本翻倍還容易出現內容不同步。現在的主流做法是 RWD。
驗收 RWD 一定要用實體手機嗎？
模擬器加實機結合：開發者工具掃斷點很快，但字體渲染、觸控手感、滾動慣性只有實機能還原。至少一台 Android 加一台 iPhone 各過一遍。
互動式網頁的動畫會拖慢手機端嗎？
會，這是 RWD 驗收的常見死角。每個動效在慢網下要嘛流暢、要嘛優雅降級成靜態，做不到的就砍掉。
用 Google 的檢測工具過線，是不是就驗收完成了？
工具過線是入場券不是終點。Core Web Vitals 是統計門檻，實際的觸控誤觸、圖片裁切、表單體驗仍要人工按清單過一遍。
作者：劉宇，河南天問網路技術負責人。公司 2017 年成立（工商登記 2017-05-03），長期維護 30–40 個外貿獨立站，自營 tianwenwangluo.com、waimaodulizhan.com、tianwenseo.com 三個站。本文數據均來自我們自己站台的實測，不承諾排名、流量與詢價數。