你可能有過這種經驗：用手機點進一個網站，字小到要用兩根手指放大，按鈕擠在一起點不到，表格一半跑到螢幕外面。多半撐不到幾秒，就按上一頁離開了。
現在大部分人是用手機上網的。依 StatCounter 的統計，2026 年 9 月台灣的網頁瀏覽中，手機約占 58%，電腦約 39%。網站在手機上好不好用，會直接影響客人願不願意留下來。
這篇用白話解釋 RWD 是什麼、為什麼要手機優先，整理手機版最常見的問題，以及不懂技術也能自己檢查的方法。
RWD 響應式網站是什麼？
想像一篇文章要印在 A4 紙和名片上。A4 可以排成兩欄、放大圖；名片很小，就只能排成一欄，圖片縮小、放在文字上面。內容一樣，排法跟著紙張大小改變。
RWD 就是這個概念。網站只有一個，網址也只有一個，但會依照螢幕寬度切換排法：
- 電腦：版面寬，可以左右並排，例如左邊文字、右邊圖片
- 平板：寬度中等，兩欄可能變成上下排列，選單也可能收起來
- 手機：版面窄，內容改成一欄由上往下排，選單收成一個按鈕（常見的三條線圖示）
早期有些網站會另外做一個手機版網站，網址可能是 m.開頭，電腦版和手機版要分別維護，常常改了一邊忘了另一邊。RWD 只要維護一個網站，現在大部分的網站系統都以 RWD 為基本做法。
| RWD 響應式網站 | 分開的手機版網站 | |
|---|---|---|
| 網站數量 | 一個 | 電腦版、手機版各一個 |
| 網址 | 同一個 | 通常不同 |
| 內容更新 | 改一次全部生效 | 兩邊都要改 |
| Google 的建議 | 推薦 | 可以用，但設定比較複雜 |
為什麼要「手機優先」？
手機優先（Mobile First）是指設計網站時，先想清楚手機上怎麼呈現，再延伸到電腦版。原因有兩個：
第一，大多數客人用手機看。 尤其從 IG、LINE、Google 地圖點進來的客人，幾乎都是用手機。如果只在電腦上檢查網站，等於只照顧到少數人。
第二，Google 也看手機版。 Google 的行動版網站最佳做法說明（2025 年 12 月更新）寫到，Google 會以網站的手機版內容來建立索引和排名，也推薦使用 RWD。手機版如果少了電腦版有的內容，那些內容在搜尋上可能就會被忽略。
手機優先也會逼你做取捨。手機螢幕小，放不下所有東西，所以要先決定：客人一打開最需要看到什麼？通常是你是誰、提供什麼、怎麼聯絡你。想清楚這件事，電腦版也會跟著變清楚。
手機版最常見的 5 個問題
就算網站有做 RWD，手機版還是常常出現這些問題：
1. 字太小、行距太擠
電腦上看剛好的字，到手機上可能小到要放大才看得清楚。內文太小、行距太擠、整段文字沒有分段，在手機上會變成一大塊看不下去的文字牆。手機版內文建議至少跟系統預設字級差不多大，段落也要比電腦版更短。
2. 按鈕太小、靠太近
手指比滑鼠游標粗很多。按鈕或連結太小、彼此靠太近，很容易按錯。網頁無障礙標準 WCAG 2.2 對點擊目標的說明（2026 年 5 月更新）建議，可點擊的目標至少要 24×24 像素（CSS 像素），重要的按鈕最好做得更大。頁尾一排擠在一起的小圖示、選單裡靠太近的項目，是最常見的問題位置。
3. 圖片太大，載入很慢
手機常常在行動網路下使用，網路不一定穩定。如果首頁放了好幾張沒有壓縮、檔案好幾 MB 的大圖，客人要等很久才看得到畫面。照片上傳前先壓縮、裁成適合網頁的尺寸，是最簡單也最有效的改善方式。
另外，橫幅大圖在手機上會被裁切，圖片中央以外的文字或商品可能會被切掉。重要的橫幅最好準備手機版的圖片，或是不要把文字直接做在圖上。
4. 表格破版
價目表、規格表、比較表在電腦上很清楚，到了手機上，欄位太多就會擠在一起或超出螢幕，客人要左右滑才看得完。欄位多的表格，可以改成左右滑動的表格，或是在手機上改用卡片、清單的方式呈現。
5. 彈出視窗和固定元素蓋住內容
一進網站就跳出大大的優惠視窗，在手機上可能整個螢幕都被蓋住，關閉按鈕又小到找不到。固定在畫面底部的 LINE 按鈕、Cookie 提示、客服視窗疊在一起，也會擋住內容和其他按鈕。手機上的彈出視窗要小、要容易關，固定元素不要放太多。
怎麼自己檢查網站的手機版
不懂技術也可以做這些檢查：
- 用自己的手機逛一遍：從首頁開始，像客人一樣點每個選單、每個按鈕，看文字讀不讀得清楚、按鈕好不好按、有沒有要左右滑的地方。
- 換不同的手機和瀏覽器：請家人朋友用 iPhone、Android 各看一次，也用 Safari、Chrome 打開。不同手機的螢幕大小和預設字級不同，問題不一定在你的手機上出現。
- 橫向、直向都看：把手機轉成橫向，看版面有沒有跑掉。
- 用電腦瀏覽器的開發者工具：在 Chrome 按右鍵選「檢查」，切換到裝置模式，就能模擬不同尺寸的手機畫面，一次看很多種寬度。
- 測載入速度：用 Google 的 PageSpeed Insights 輸入網址，會分別列出手機和電腦的速度分數，以及可以改善的項目，例如圖片太大。
最後一個檢查最重要：實際走一次客人的流程。用手機填一次表單、加一次 LINE、下一次測試訂單，確認每一步在手機上都順利完成。很多網站畫面看起來沒問題，卻在送出表單、選擇規格這種步驟卡住。
找人做網站時，RWD 要問什麼？
現在大部分的網站系統和設計師都會做 RWD，問題通常不是「有沒有做」，是「手機版有沒有認真做」。詢價時可以問：
- 設計時會先提供手機版的畫面嗎？還是只看電腦版？
- 上線前會在哪些裝置上測試？
- 表格、橫幅圖片在手機上會怎麼處理？
- 上傳的圖片會自動壓縮嗎？還是要自己處理？
basedot 做網站時，首頁雛型是可以直接在手機上滑的網頁，每一頁上線前都會在手機、平板、電腦上檢查過。完整的建置過程可以參考〈basedot 網站建置流程公開〉。詢價時報價單上還要看哪些項目，可以參考〈網頁設計報價單怎麼看？〉。
如果你現在的網站手機版問題很多，要修還是要重做，可以參考〈舊網站該翻新還是重做？〉的判斷方式。
RWD 常見問題
RWD 網站要另外收費嗎？
現在 RWD 是網站的基本規格，大部分的網站系統和版型都內建，通常不會另外收費。如果報價單把「手機版」列成加價項目，可以問清楚包含哪些內容，以及使用的網站系統是不是比較舊。
我的網站是好幾年前做的，怎麼知道有沒有 RWD？
用手機打開網站，如果看到的是縮小版的電腦畫面，字很小、要用手指放大才看得清楚，就代表沒有做 RWD。也可以在電腦上把瀏覽器視窗慢慢拉窄，有 RWD 的網站版面會跟著重新排列。
手機版和電腦版的內容可以不一樣嗎？
可以調整排列方式和呈現方法，例如在手機上把長段落收進可以展開的區塊。但主要內容最好兩邊一致，因為 Google 是以手機版的內容來建立索引，手機版少了內容，搜尋表現可能會受影響。
做好 RWD，網站就不會跑版了嗎？
RWD 是基礎，但不保證每個畫面都完美。之後新增內容時，例如貼上很寬的表格、上傳文字做在圖上的橫幅，還是可能在手機上出問題。每次更新重要頁面後，用手機看一次是最簡單的習慣。
結論：先在手機上看過，再說網站做好了
RWD 讓同一個網站在不同螢幕上都能好好閱讀，已經是網站的基本規格。真正的差別在細節：字夠不夠大、按鈕好不好按、圖片載得快不快、表格有沒有破版。
不管網站是新做的還是舊的，現在就拿起手機，用客人的角度從首頁走到聯絡表單一次。卡住的地方，就是最需要優先改善的地方。
有架設網站的需求，歡迎跟 basedot 網頁設計聯繫。
