RWD 響應式網站是什麼？為什麼手機版很重要
RWD 響應式網站是什麼？為什麼手機版很重要？
RWD（Responsive Web Design）是讓同一個網站依螢幕寬度自動調整版面的設計方式，手機、平板、電腦用同一個網址與同一份內容。手機版重要，是因為不少訪客會用手機開網站（實際比例可在 GA4 的裝置報表查看），而且 Google 以網站的行動版內容作為索引與排名的主要依據。
手機的螢幕寬度、操作方式和閱讀習慣都與電腦不同，網站要針對這些差異調整，這就是響應式設計（RWD）要處理的事。
RWD 的運作原理
RWD 主要靠三項技術：
- 視窗設定（viewport）：在網頁標頭宣告裝置寬度，讓手機瀏覽器用實際螢幕寬度顯示，不是縮小整個電腦版畫面。
- 彈性版面：版面寬度用百分比或相對單位，而不是固定像素。
- 媒體查詢（media query）：依螢幕寬度套用不同的樣式，例如寬螢幕顯示三欄，窄螢幕改成單欄。
圖片也要配合調整，避免在手機上載入過大的檔案，拖慢開啟速度。常見做法是同一張圖準備不同尺寸，由瀏覽器依螢幕寬度挑選合適的版本。文字大小、行距和按鈕尺寸也會跟著螢幕調整，讓手指好點、眼睛好讀。
為什麼手機版很重要
第一，訪客的使用習慣。從社群連結、LINE 分享或搜尋結果點進來的人，常常是用手機開的。版面如果要左右捲動、字太小、按鈕點不到，訪客很容易直接離開。
第二，搜尋引擎。Google 採行動優先索引（mobile-first indexing），以網站的行動版內容來建立索引與判斷排名。行動版缺少電腦版有的內容，搜尋引擎看到的就是缺少的版本。基礎的搜尋優化觀念可以參考 SEO 基礎。
第三，維護成本。同一份內容、同一個網址，更新一次就好。分享連結時也不會出現電腦版網址在手機上開不好、或手機版網址在電腦上排版錯亂的情況，社群貼文、廣告與名片上的 QR Code 都可以放同一個網址。
手機版常見的問題
| 問題 | 結果 | 檢查方式 |
|---|---|---|
| 沒有設定 viewport | 手機顯示縮小的電腦版 | 檢查網頁標頭 |
| 按鈕與連結太小太近 | 容易點錯 | 用手指實際操作 |
| 圖片過大 | 載入緩慢 | PageSpeed Insights |
| 表格或圖片超出螢幕 | 出現左右捲動 | 手機實測 |
| 彈出視窗遮住內容 | 無法關閉或擋住畫面 | 手機實測 |
設計時的取捨
手機螢幕空間有限，內容要排出優先順序：訪客最需要的資訊，例如電話、地址、預約按鈕，要放在不用滑動就看得到的地方。電腦版的複雜選單，在手機上通常要收進選單按鈕，並確認選單展開後每個項目都能點到，也能再次收起。有些電腦版的滑鼠懸停效果，在觸控螢幕上沒有對應操作，需要換成點擊。表單欄位也要配合手機，例如電話欄位叫出數字鍵盤，減少訪客輸入的麻煩。
上線前怎麼測
- 用至少一支 iPhone 和一支 Android 手機實際開啟，兩者的瀏覽器引擎不同，顯示結果可能有差異
- 橫向與直向都看一遍，確認旋轉螢幕後版面沒有跑掉、內容沒有被裁切
- 填寫並送出聯絡表單，確認能順利操作，也確認送出後信箱有收到通知
- 在行動網路下測載入速度，速度檢查方式見 網站速度怎麼檢查
響應式設計屬於網站開發的基本項目。這類檢查可以交給網站開發團隊處理。
常見問題
- RWD 和另外做一個手機版網站有什麼差別？
- RWD 只維護一個網址與一份內容，更新一次所有裝置都同步。另做手機版（例如 m. 開頭的網址）要維護兩套，內容容易不一致，現在已不常見。
- 怎麼檢查自己的網站有沒有做好手機版？
- 用手機實際開啟，確認文字不用放大就能讀、按鈕好點、沒有左右捲動。也可以用 Chrome 開發者工具的裝置模擬模式，或 Google 的 Lighthouse 和 PageSpeed Insights 檢查。
- 舊網站沒有 RWD，一定要重做嗎？
- 不一定。如果版面結構單純，有時可以只修改樣式表補上。但舊網站的程式架構過舊時，改版往往比補丁更省事，需要先評估。