RWD網頁不是「手機能開」的意思。做一個RWD網頁（Responsive Web Design，響應式網頁），是讓同一份頁面在桌上型電腦、平板、手機上各自排出可用的版面：該換行的地方換行、該縮小的圖縮小、該收起的選單收起。這篇先花一節講清 RWD 的原理，然後給一份可以直接照著打勾的手機端驗收清單——外貿站的買家有很高比例用手機開信裡的連結，手機版驗不過，等於把詢價往外推。
RWD 的原理：同一份內容，不同的排法
響應式網頁的技術核心只有一句：頁面讀取螢幕寬度，套用對應的 CSS 規則。設計師交付的是桌面和手機兩套（或三套）版面，開發把它們寫進同一份 HTML，用斷點（breakpoint）切換。所以驗收 RWD 不能只看縮放瀏覽器視窗——真實手機的瀏覽器還有系統字體縮放、效能差異、觸控目標大小的問題，桌面上模擬不出來。
和 RWD 對比的另一條路是另做一個手機版網站（m. 開頭的網域）。那條路維護兩份內容、兩份連結，Google 還要處理兩個網址的關係，2026 年的今天沒有理由再選它。
常見的錯法是「只縮小、不重排」：把桌面版整頁等比例縮小塞進手機螢幕，字小到要放大才能讀、按鈕小到點不準。這種做法技術上有 RWD 之名，體驗上等於沒有。真正的響應式網頁在手機上會重新決定元素順序——產品圖在上、規格表在下、詢價按鈕固定在螢幕底部——而不是把桌面的排版原樣壓縮。
為什麼外貿站的 RWD 直接影響詢價
採購收到開發信，多半先用手機看一下網站再決定要不要回。這個「順手看一下」的三十秒裡，版面歪掉、按鈕點不到、圖片跑不出來，任何一種都直接結束這次機會——他不會回家換電腦再看一次。體驗問題怎麼排修復優先順序，哪些體驗問題最傷詢價那篇有展開；這篇給的是驗收當天要逐項打勾的表。
手機端驗收清單：五組二十項
一、版面與可讀性
- 首屏不用橫向捲動，內容都排在螢幕寬度內
- 正文字級不小於 16px，段落寬度不超過螢幕的四分之三
- 標題階層（H1、H2、H3）在手機上視覺大小有明顯區別
- 表格在小螢幕可橫向捲動或有卡片式替代排法
二、導覽與選單
- 漢堡選單展開後項目完整，多層選單能逐層點開
- 從任何產品頁回到首頁不超過兩次點擊
- 頁尾有聯絡資訊，不依賴選單才找得到
三、表單與詢價
- 表單欄位點擊後放大鏡不會把頁面推走（字級 16px 以上可避免）
- 下拉選單在手機上能正常展開、選項可讀
- 送出後有明確的成功訊息，實際寄一封確認信箱收到
- 詢價按鈕和 WhatsApp 連結在每個長頁面都看得到，不用捲回頂部
四、圖片與速度
- 產品圖在手機上載入完成不超過三秒，弱網環境可接受
- 圖片有載入中的佔位，不會把版面撐跳
- 輪播圖手勢滑動正常，不自動跳出影片或音訊
五、觸控與細節
- 所有可點擊元素（按鈕、連結、選單）最小 44×44 像素，指腹點得到
- 相鄰的兩個連結間距足夠，不會點成隔壁項
- 電話號碼點了直接撥號、email 點了直接開信件
- 轉向橫拿手機，版面重排後仍可用，關鍵內容不消失
二十項裡最容易漏的是第三組的表單實測。我們看過的實際案例：一個站的表單靜默壞了 12 天，207 次付費點擊落在寄不出去的表單上，根因是 reCAPTCHA 的站點密鑰註冊在另一個網域。桌機上看不出任何異常，手機上也看不出——只有真的寄一封才知道。
清單怎麼跑：三個寬度加實機
跑清單時依序用三個寬度看每個頁面：桌機 1280px 以上、平板直向 768px 左右、手機 375px 左右。前兩個用瀏覽器的裝置模擬可以，第三個一定要換實機——模擬器算不出來觸控目標大小和真實載入速度的體感。二十項清單每項記「通過／不通過」加一張截圖，整份存成驗收文件。哪項不通過就退回哪項，不要用「整體感覺還行」結案。
版面問題之外，手機版還牽動 SEO。Google 的檢索和排名用的是行動裝置版的內容（Mobile-first indexing），桌面上有、手機版上被藏掉或載入不出來的內容，等於不存在。這對外貿站的意義是：手機版不是桌面版的簡化附贈品，是 Google 眼裡的「正本」。
驗收工具與數據門檻
工具用兩個就夠。第一，實體手機（Android 和 iPhone 各一台）逐頁點過，這步沒有任何工具能代替。第二，PageSpeed Insights 的行動裝置分頁，Core Web Vitals 的官方門檻：LCP 2.5 秒、INP 200 毫秒、CLS 0.1（web.dev/articles/vitals）。三個數字截圖存檔，當作驗收單的附件。
速度不及格時，先查圖片。我們接手過一個站，產品頁模板放了 15MB 的首圖，幾百個產品頁的 Core Web Vitals 全部不及格，伺服器完全沒問題。手機端對圖片大小比桌機敏感得多，速度的完整排查思路在頁面載入速度那篇。把這份清單併進上線前檢查清單一起用，上線當天照著跑一遍。
常見問題
RWD 和另做手機版網站一樣嗎？
不一樣。RWD 是同一份 HTML 用斷點切換版面；另做手機版是兩個網站、兩份內容、兩套連結，維護成本翻倍，2026 年已經沒有理由選它。
怎麼快速檢查一個網站是不是 RWD？
把瀏覽器視窗從寬拉到窄，看版面有沒有重排（不是出現橫向捲動軸）。初步通過後，務必再用實體手機開一次——觸控和速度的體感，模擬器給不了。
RWD 會影響 SEO 嗎？
會。Google 用行動裝置優先索引，排名看的是手機版的內容。桌面上有、手機版上載入不出來的內容，等於不存在。
舊網站可以改成 RWD 嗎？
看主題。主題本身支援響應式，調校斷點就能改；主題老舊不支援，與其到處打補丁，通常重換主題重排一次更划算。
這篇文章是誰寫的、怎麼核
作者劉宇，河南天問網路技術有限公司創辦人（公司 2017 年 5 月完成工商登記）。公司做外貿 WordPress 獨立站的架設與維護、Google SEO 與 Google 廣告代營運，長期維護 30–40 個外貿獨立站。文中每個數字要嘛來自我們自己網站與接手站點的實測，要嘛附上來源連結；不承諾排名、不承諾詢價數。報價依專案範圍客製，開工前書面確認；中文聯絡方式：微信 g0365489、電話 13526816415。