RWD 響應式網頁怎麼做：手機端驗收清單

手機開得了網站，就算RWD做好了嗎？響應式網頁（Responsive Web Design）要讓同一頁在桌機、平板與手機都能使用：文字能換行、圖片會縮放、選單能收起。下面先講原理，再給手機驗收清單。外貿買家常用手機開信裡的連結，手機版不好用，就可能失去詢價機會。

RWD 的原理：同一份內容，不同的排法

頁面依螢幕寬度套用CSS規則，就是RWD的核心。設計提供桌面與手機兩套，或三套版面，再用同一份HTML和斷點切換。驗收不能只縮放桌面視窗；真實手機還有字體縮放、效能與觸控大小差異。需要用手機操作。

和 RWD 對比的另一條路是另做一個手機版網站（m. 開頭的網域）。那條路維護兩份內容、兩份連結，Google 還要處理兩個網址的關係，2026 年的今天沒有理由再選它。

只把桌面版等比例縮小，不算做好手機體驗。字太小、按鈕點不準，客戶仍用不下去。響應式要重新安排內容，例如產品圖在上、規格表在下、詢價按鈕固定底部。重點是重新排，而不是縮成一張小圖。

為什麼外貿站的 RWD 直接影響詢價

採購收到開發信，多半先用手機看一下網站再決定要不要回。這個「順手看一下」的三十秒裡，版面歪掉、按鈕點不到、圖片跑不出來，任何一種都直接結束這次機會——他不會回家換電腦再看一次。體驗問題怎麼排修復優先順序，哪些體驗問題最傷詢價那篇有展開；這篇給的是驗收當天要逐項打勾的表。

手機端驗收清單：五組二十項

一、版面與可讀性

1. 首屏不用橫向捲動，內容都排在螢幕寬度內。不用左右找內容。
2. 正文字級不小於 16px，段落寬度不超過螢幕的四分之三。手機上要能直接讀。
3. 標題階層（H1、H2、H3）在手機上視覺大小有明顯區別。讀者要看得出層次。
4. 表格在小螢幕可橫向捲動或有卡片式替代排法。表格資訊仍要讀得到。

二、導覽與選單

1. 漢堡選單展開後項目完整，多層選單能逐層點開。每層都要實際點過。
2. 從任何產品頁回到首頁不超過兩次點擊。回到起點不要繞路。
3. 頁尾有聯絡資訊，不依賴選單才找得到。聯絡入口要好找。

三、表單與詢價

1. 表單欄位點擊後放大鏡不會把頁面推走（字級 16px 以上可避免）。填寫時頁面要穩定。
2. 下拉選單在手機上能正常展開、選項可讀。選項要能實際選取。
3. 送出後有明確的成功訊息，實際寄一封確認信箱收到。成功提示與收到郵件都要確認。
4. 詢價按鈕和 WhatsApp 連結在每個長頁面都看得到，不用捲回頂部。客戶想詢價時要找得到。

四、圖片與速度

1. 產品圖在手機上載入完成不超過三秒，弱網環境可接受。不能只看圖片是否存在。
2. 圖片有載入中的佔位，不會把版面撐跳。載入前後位置要穩定。
3. 輪播圖手勢滑動正常，不自動跳出影片或音訊。滑動與播放要能控制。

五、觸控與細節

1. 所有可點擊元素（按鈕、連結、選單）最小 44×44 像素，指腹點得到。實機上要點得準。
2. 相鄰的兩個連結間距足夠，不會點成隔壁項。別讓人誤點。
3. 電話號碼點了直接撥號、email 點了直接開信件。聯絡動作要能完成。
4. 轉向橫拿手機，版面重排後仍可用，關鍵內容不消失。換方向也要檢查。

二十項裡最容易漏的，是表單寄送測試。我們遇過表單靜默壞了12天，207次付費點擊落在寄不出去的表單上，原因是reCAPTCHA金鑰登記在另一個網域。桌機、手機畫面都正常。真的寄一次，才能查出問題。

清單怎麼跑：三個寬度加實機

依序檢查桌機1280px以上、平板直向768px左右、手機375px左右。前兩項可用瀏覽器模擬，手機要換實機，確認觸控和真實載入的感受。二十項各記通過或不通過，再留截圖存成驗收文件。哪項沒過就修哪項，別用整體看起來還行結案。

手機版也影響SEO。Google採行動裝置優先索引，以手機內容做檢索與排名依據。桌面有、手機被隱藏或載入不出的資訊，等於不存在。手機版是需要認真驗收的正式版本。

驗收工具與數據門檻

工具用兩個就夠。第一，實體手機（Android 和 iPhone 各一台）逐頁點過，這步沒有任何工具能代替。第二，PageSpeed Insights 的行動裝置分頁，Core Web Vitals 的官方門檻：LCP 2.5 秒、INP 200 毫秒、CLS 0.1（web.dev/articles/vitals）。三個數字截圖存檔，當作驗收單的附件。

速度不及格時，先查圖片。我們接手過一個站，產品頁模板放了 15MB 的首圖，幾百個產品頁的 Core Web Vitals 全部不及格，伺服器完全沒問題。手機端對圖片大小比桌機敏感得多，速度的完整排查思路在頁面載入速度那篇。把這份清單併進上線前檢查清單一起用，上線當天照著跑一遍。

延伸閱讀

• 上一篇：設計網頁費用怎麼算：報價結構與常見加價項
• 服務與價格
• 外貿獨立站
• 聯絡我們