RWD 網頁設計是什麼？手機版網站的檢查重點與實例

把瀏覽器縮窄，網站內容沒有超出畫面，不代表手機版已經做好。訪客還需要看清文字、打開選單、理解作品，並順利使用電話、LINE 或表單。企業驗收時，應從這些任務出發，不能只確認首頁截圖是否漂亮。

RWD 是 Responsive Web Design，中文常稱響應式網頁設計。它讓版面因應不同螢幕與使用情境調整，讓同一份網站內容更容易閱讀和操作。

一、 RWD 如何適應不同螢幕？

RWD 可以透過可伸縮的版面、圖片和樣式條件調整排列。例如桌面的三欄服務在窄螢幕改成直向排列，主選單改成可開合導覽，文字仍保有可閱讀的尺寸。web.dev 的媒體查詢教學說明了依裝置條件調整樣式的做法。

重點是內容需要在哪個寬度重新安排，不是只為幾支手機設定固定尺寸。中間寬度、橫向畫面與使用者放大文字，都可能暴露原本未發現的問題。

企業可以先把 360、390、768 與 1440 像素列為一組測試寬度，再補上實際客戶常用的裝置。這是便於重複檢查的範例，並非所有網站的合格門檻。驗收時逐步拖動視窗，特別看欄位從並排變成直排的前後，找出標題擠在一起、按鈕換行或圖片突然過小的狀況。

二、 可以縮小，不代表容易操作

檢查主標是否自然換行、內文是否需要反覆放大、長網址是否撐寬畫面。不要為了讓全部內容塞在第一屏，就縮小字體或把必要說明藏起來。留白與行距也要幫助閱讀，而不是只追求裝進更多字。

以下是假設的驗收情境：一間顧問公司將六項服務放在桌面橫排。手機版可以重新排列，或使用有清楚操作提示的元件；若使用者只看到前兩項，卻不知道還有其他服務，就需要改善內容呈現與操作提示。這個例子是版面說明，不是實際客戶成效。

文字測試也應使用正式內容。短標題沒有問題，不代表較長的中文服務名稱也能正常呈現；只有一行摘要的卡片正常，也不代表另一張有三行內容時按鈕仍能對齊。修正時應調整區塊排列和間距，保留完整資訊，不靠截斷正文或縮小所有文字來掩蓋問題。

三、 選單、按鈕與表單

用手指操作選單，確認能開啟、關閉、進入子頁並返回。按鈕與鄰近連結要容易分辨，避免誤按；固定的頁首或聯絡入口不應擋住內容、鍵盤或送出按鈕。鍵盤操作時也要看得到目前焦點。

若有表單，欄位需有清楚標籤，輸入時不應失去內容或被鍵盤遮住。送出失敗應指出可理解的原因，成功則必須對應後端確實接收。不要只測空白畫面，也要測錯誤、重試與返回後的狀態。web.dev 的互動設計說明提醒，裝置尺寸不等於輸入方式，觸控、滑鼠與鍵盤都應考量。

有輪播或可展開區塊時，請走完整操作：展開內容、點進詳細頁、按瀏覽器返回，再試一次相同操作。若畫面留在原位置卻無法滑動或點擊，仍屬於功能問題。電腦上的滑鼠移入效果也要有適合觸控的呈現方式，不能讓手機使用者必須猜測哪裡可以點。

四、 圖片、表格與長內容

圖片應保留適合的比例，並確認主體沒有被不合理裁切。作品細節若重要，可提供完整圖或清楚的查看方式。官方響應式圖片教學也區分完整保留比例與裁切填滿的選擇，應依內容目的決定。

比較表不必硬縮成難讀的小字，可以在表格區域提供橫向捲動，保留欄位對照；整個頁面則不應因此左右晃動。長文章目錄要能前往對應段落，固定導覽不能遮住標題，返回後也應維持正常閱讀與操作。

檢查作品頁時，先說清楚哪些圖要完整呈現，哪些是允許裁切的情境照片。例如品牌識別規範或網站全頁截圖，如果切掉邊緣就少了資訊，應保留完整圖並提供適合閱讀的方式；裝飾背景則可以配合畫面構圖裁切。同一張圖不必在所有裝置都使用相同顯示高度。

五、 手機速度與穩定性

用實際手機與一般網路開啟頁面，觀察主要圖片何時出現、按鈕是否遲鈍、載入後文字或圖片是否突然移動。測試要留下網址、日期、裝置與網路條件，才有辦法比較調整前後。

Google 的 Web Vitals 說明將重要體驗分為載入、互動與視覺穩定性。工具分數只是部分證據，實驗室測試與真實訪客資料也不同；不能從一張高分截圖推論所有使用者都順暢，更不能把 RWD 當成排名保證。

六、 實際驗收方式

先選首頁、服務頁、作品詳細頁、長文章與聯絡頁，各走一次「閱讀 → 查看證據 → 聯絡」的完整路徑。以不同手機寬度、平板與桌面檢查，再用真實裝置補測，不能只依賴電腦的模擬畫面。

每個問題記錄頁面、裝置、操作步驟及畫面，讓修改者能重現。電話與 LINE 可以確認連結啟動，不需要為驗收真的撥號或傳送訊息；表單測試則使用約定的測試收件環境。

一筆可交付的問題紀錄可以寫成：「在指定手機與瀏覽器開啟服務頁，滑到作品區，點入案例後返回；預期仍可左右瀏覽，實際按鈕無反應。」附上畫面與發生時間，修正後照同一路徑重測。如果測試只涵蓋模擬畫面，也要明確記錄，不能寫成所有手機皆已通過。

七、 常見問題

7.1 有 RWD 就不用檢查手機版嗎？

仍要檢查。長標題、新圖片、表格或外掛加入後，都可能影響原本的版型，且視覺正常不等於互動正常。

7.2 手機版內容一定要和桌面完全一樣排列嗎？

排列可以依閱讀需求調整，但重要資訊與功能仍應可取得。不要只為縮短頁面就移除使用者需要的服務說明。

7.3 所有表格都應改成卡片嗎？

不必。需要逐欄比較時，保留可捲動表格可能更容易理解。應依閱讀任務決定，而不是一律改成卡片。

八、 相關閱讀與下一步

若手機操作已確認正常，仍覺得載入慢或畫面跳動，可以接著看網站速度與 PageSpeed 指標說明，區分圖片載入、互動延遲與版面穩定性的問題。

本文技術說明依 web.dev 的媒體查詢、互動、響應式圖片與 Web Vitals 文件核對；驗收表為企業自行操作的檢查範本。

若正在規劃整個官網，可搭配網站設計指南整理內容，再查看網站建置服務。你也可以提供有問題的頁面與手機操作情境，與淞間討論需要調整的範圍。