RWD 響應式網頁設計完整指南：打造跨裝置完美體驗

客人在 LINE 上收到朋友分享的連結，用手機點開你的網站：字小到要用兩指放大、按鈕擠在一起一按就按錯、圖片超出畫面要左右滑……大部分的人不會耐著性子看完，而是直接按上一頁，去看下一家。

RWD（Responsive Web Design，響應式網頁設計）要解決的就是這件事：同一個網站，會隨著螢幕大小自動調整成適合的樣子——手機上是單欄、字級剛好、按鈕好按；平板和電腦上再展開成多欄的版面。

這篇寫給正在規劃網站的老闆與行銷人員：不談程式碼，而是整理一個好的 RWD 網站，在手機、平板、電腦上應該做到哪些細節，以及網站做好時要怎麼驗收。想看實際寫法的工程師，可以直接看RWD 響應式網頁怎麼做？viewport 語法與 CSS 基本寫法。

RWD、另做手機版、自適應，差在哪？

讓網站在手機上好看，大致有三種做法：

• RWD 響應式設計：只有一個網址、一份網頁內容，版面依螢幕寬度自動重新排列。內容只要改一次，手機和電腦都會同步。
• 另做手機版網站：例如電腦版是 www.、手機版是 m. 開頭的另一個網址。等於要維護兩個網站，很容易出現手機版內容沒更新、兩邊不一致的問題。
• 自適應設計（Adaptive）：針對幾種固定的螢幕尺寸，各準備一套版面。螢幕尺寸剛好卡在中間時，畫面可能不協調。

Google 官方建議的做法是 RWD 響應式設計：網址只有一個，好分享、好收錄，也最好維護。現在新做的網站，RWD 已經是基本條件。

為什麼 RWD 這麼重要

• 客人多半先用手機認識你：從 LINE、Facebook、Google 地圖點進網站，大多是在手機上。手機版的第一印象，常常就是網站唯一的機會。
• Google 用手機版網頁來排名：Google 現在以手機版的內容作為收錄和排名的主要依據（行動優先索引），手機版不好用，會直接影響搜尋排名。SEO 的完整做法可以參考2026 SEO 搜尋引擎優化攻略。
• 只要維護一個網站：內容、商品、最新消息只要更新一次，所有裝置同步。

先想手機，再想電腦：手機優先的設計思維

很多網站是先設計電腦版，再把東西「塞進」手機裡，結果手機上什麼都有、卻什麼都找不到。手機優先（Mobile First）的做法剛好相反：先問「客人拿著手機，最想做什麼？」

• 餐廳：看菜單、營業時間、打電話訂位、導航過來。
• 補習班、家教：看課程與費用、加 LINE 詢問。
• 公司官網：知道你做什麼、看案例、找到聯絡方式。

把這幾件事放在手機畫面最容易看到、點到的地方，再往大螢幕擴充更多內容與視覺效果。先想清楚重點，電腦版也會跟著變得更清楚。

跨裝置體驗的 10 個細節

1. 版面：依內容決定斷點

螢幕寬度到某個大小時，版面從一欄變成兩欄、三欄，這個切換點叫做「斷點」。常見的參考寬度是手機約 360～430 像素、平板約 768 像素、筆電與桌機 1024 像素以上，但好的斷點應該看內容什麼時候開始擠來決定，而不是只套固定尺寸。

另外，現在的螢幕種類很多，折疊手機、平板橫放、超寬螢幕都有。檢查網站時，不要只看兩三種尺寸，把瀏覽器視窗從最窄慢慢拉到最寬，看中間有沒有破版。

2. 文字：大小與行距

• 手機上的內文，字級建議 16 像素以上，行高約 1.6～1.8 倍，讀起來才不吃力。
• 每一行不要太長。大螢幕上文字從左邊一路排到右邊，讀到行尾很容易找不到下一行，內文區塊的寬度要有限制。
• 輸入框的字級小於 16 像素時，iPhone 的瀏覽器在點選時會自動放大畫面，表單欄位也要注意字級。

3. 按鈕：夠大、有間距

手指比滑鼠游標粗得多。Apple 建議可點選的範圍至少 44 × 44 點，Google 的 Material Design 建議 48 × 48，無障礙規範 WCAG 2.2 也訂了最低標準。實際做法是：按鈕做大一點、按鈕之間留空隙，文字連結不要一個緊貼一個。

4. 選單：少而清楚

• 手機上常用「漢堡選單」（三條線的圖示）把選單收起來，但最重要的行動，例如「立即預約」「加 LINE」，可以直接放在畫面上。
• 選單項目不要太多、層數不要太深，手機上展開三層選單，很難點得準。
• 固定在畫面上方的頁首，高度不要太高，免得在手機上擋住一大塊內容。

5. 圖片與影片：自動縮放、依螢幕給適合的尺寸

• 圖片和影片要能跟著畫面寬度縮放，不能超出畫面。嵌入的 YouTube、Google 地圖也一樣，做法可以參考iframe 嵌入網頁語法：RWD 自適應寬度。
• 手機不需要下載給大螢幕用的大圖。依螢幕提供不同尺寸的圖片、改用 WebP 等較新的格式、畫面下方的圖片等捲到了再載入，都能讓手機版快很多。
• 圖片要預留好長寬比例，載入時版面才不會突然跳動。
• 電腦版的橫幅大圖，縮到手機上時，圖片裡的文字常被裁掉或小到看不清。這時最好替手機另外準備一張直式或文字較大的圖片。

6. 表格與長內容

價目表、規格表這類多欄表格，放到手機上常常擠成一團。常見的處理方式有兩種：讓表格可以左右滑動，並提示「可左右滑動」；或是在手機上改成一張一張的卡片排列。

7. 表單：欄位少、好輸入

• 只留必要的欄位。每多一個欄位，願意填完的人就少一些。
• 電話欄位跳出數字鍵盤、Email 欄位跳出有 @ 的鍵盤，這些是網頁設定就能做到的細節。
• 錯誤提示要寫清楚哪裡錯、怎麼改，送出後要有明確的完成畫面。

8. 手機才有的便利

手機本身就是電話、也有地圖和 LINE，網站應該好好利用：

• 一鍵撥號：電話號碼做成可以直接撥打的連結。
• 加 LINE、傳訊息：放上加好友的連結或 QR Code（在手機上用連結比較方便，電腦上才適合掃 QR Code）。
• 一鍵導航：地址連到 Google 地圖，客人點了就能開始導航。

9. 速度：手機網路不一定穩

客人可能在捷運上、騎樓下、訊號不好的地方打開網站。圖片壓縮、減少不必要的外掛與特效、選擇效能穩定的主機，對手機版特別重要。改善方法可以參考網站加速完整攻略。

10. 無障礙：讓每個人都看得清楚

• 文字和背景的顏色對比要夠，淺灰字配白底在戶外陽光下幾乎看不見。
• 不要禁止使用者用兩指放大畫面，視力不好的長輩很需要這個功能。
• 圖片填寫替代文字，使用螢幕報讀軟體的視障朋友才知道圖片在說什麼。

怎麼測試 RWD 網站

• 瀏覽器的裝置模式：Chrome 按 F12 打開開發人員工具，切換成手機模式，可以模擬不同尺寸的螢幕，適合快速檢查。
• 一定要用真的手機測：模擬器看不出手指好不好按、實際網路速度快不快。至少用一支 iPhone 和一支 Android 手機，直向、橫向都看一次，平板也順便檢查。
• PageSpeed Insights：到 PageSpeed Insights 輸入網址，可以看到手機版的速度分數與改善建議。
• Google Search Console：網站上線後，「網站使用體驗核心指標」報表會顯示真實使用者的體驗資料。

Google 以前提供的「行動裝置相容性測試」工具，已經在 2023 年底停止服務，現在改用上面這些工具檢查即可。

手機版常見的 8 個問題

1. 整個網頁縮成一小塊，字小到要放大才看得到。
2. 圖片、表格或嵌入的影片超出畫面，要左右滑。
3. 按鈕、連結太小或太擠，常常按錯。
4. 選單點不開，或是展開後擋住整個畫面、關不掉。
5. 一進網站就跳出大型廣告或彈出視窗，找不到關閉按鈕。這種擋住內容的彈出視窗，也會影響 Google 對網站體驗的評價。
6. 首頁輪播大圖在手機上文字被裁掉，還拖慢載入速度。
7. 電話、地址只是一般文字，不能直接撥打或導航。
8. 頁面載入時版面一直跳動，想點的東西跑掉。

網站驗收清單：交給設計公司時，可以這樣檢查

• 用手機打開每一種頁面（首頁、服務頁、文章、聯絡頁），都不需要左右滑
• 內文不用放大就能舒服閱讀
• 按鈕與連結用手指點得準
• 選單在手機上打得開、關得掉，重要行動按鈕看得到
• 圖片、影片、地圖都在畫面內，而且載入不會太慢
• 表格在手機上看得懂
• 電話可以一鍵撥打，地址可以一鍵導航
• 表單在手機上填得完、送得出去，也有完成提示
• 平板直向、橫向都沒有破版
• PageSpeed Insights 的手機版分數沒有明顯的紅色警告

延伸閱讀

• RWD 響應式網頁怎麼做？viewport 語法與 CSS 基本寫法完整教學
• 2026 SEO 搜尋引擎優化攻略：讓網站登上 Google 首頁
• 客製化網頁設計 vs 套版網站：如何做出最佳選擇？
• CSS 圖片填滿 div 不變形：object-fit: cover 用法

一個網站在手機上好不好用，從規劃版面的時候就決定了。正威網路行銷是 25 年經驗的基隆網頁設計工作室，網站方案都是 RWD 響應式客製化設計，也服務台北與全台客戶，歡迎來聊聊。