多數人談響應式網站，談的是「手機也看得到」，但真正會出事的地方不在手機，而在中間那些沒人測過的尺寸，以及上線後才被使用者踩到的操作細節。網站在設計稿上看起來完美，實際打開卻出現文字擠成一行一個字、按鈕點不到、表格被切掉一半的狀況。這篇聚焦在 rwd 網站架設的實作與驗收階段：斷點該怎麼決定、測試要測到什麼程度、以及行動版最常反覆出現的問題。
斷點不是照裝置訂，是照版面撐不住的地方訂
常見的做法是照著幾種熱門機型的寬度設定斷點，但裝置尺寸一直在變，照機型訂的斷點很快就會失準。比較穩的邏輯是反過來：把版面從寬拉到窄，觀察在哪個寬度開始出現問題，例如標題斷行變得難看、卡片擠成細長條、導覽列的項目快要換行，那個寬度就是該設斷點的位置。
這代表不同網站的斷點不會一樣，甚至同一個網站的不同區塊也可能需要各自處理。一個三欄的產品列表撐不住的寬度，跟一段長文的可讀寬度上限，本來就是兩回事。實作時把斷點視為版面的需求而不是裝置的清單，後續維護會少掉很多例外處理。
最常被跳過的，是介於手機與桌機之間的尺寸
實務上開發與驗收幾乎都集中在兩端：一台桌機、一支手機。中間那一段，包括平板直向與橫向、小尺寸筆電、以及在桌機上把瀏覽器縮成一半的狀況，往往沒有人認真看過，而它們正是最容易出問題的區間。
典型的災情是：手機版切成單欄很正常、桌機版三欄很正常，但在中間寬度時仍維持三欄，每一欄窄到內容全部擠在一起；或是選單在手機上收成漢堡按鈕、在桌機上完整展開，中間寬度卻兩種都不是，項目擠成兩行蓋住其他內容。驗收時務必把瀏覽器視窗從最寬慢慢拖到最窄，全程觀察一次，這個動作花不了幾分鐘，卻能抓出大部分的問題。
行動版最容易出事的幾個元件
- 表格：欄位多的規格表在窄螢幕上無法完整呈現，必須決定是橫向捲動、拆成卡片式，還是隱藏次要欄位，不能放著讓它被切掉。
- 導覽選單：層級太深的選單收進漢堡按鈕後，子項目常常展不開或點不到，深層分類要考慮改用其他入口。
- 表單：欄位標籤與輸入框的排列在窄螢幕要改成上下堆疊，並確認鍵盤跳出時不會遮住送出按鈕。
- 大尺寸圖片：直接沿用桌機版的高解析圖，會讓行動網路下的載入時間大幅拉長，需要提供不同尺寸的版本。
- 固定式元素：置頂列或懸浮客服按鈕在小螢幕上容易佔掉可視高度，甚至蓋住內容與按鈕。
- 可點擊區域：文字連結與小圖示在手指操作下的點擊面積要夠大，彼此也要留足夠間距，避免誤觸。
驗收時該怎麼測，才不只是縮放視窗
縮放瀏覽器視窗只能檢查版面，檢查不到觸控操作、真實網路速度、以及行動裝置上的字型與輸入行為。完整一點的驗收會分成三層：先用瀏覽器逐段縮放檢查斷點，再用實際的手機與平板開啟主要頁面，最後針對關鍵流程做完整操作。
所謂關鍵流程，是指訪客真的會走的那條路：從進站、瀏覽服務內容、點開某個項目、填寫表單、送出、看到成功訊息。這整段一定要在真實裝置上走完，因為很多問題只有在觸控與鍵盤跳出時才會顯現。另外要測的是橫向擺放、以及系統字體被放大時的呈現，這兩種情境在實際使用者身上比想像中常見。驗收清單建議寫成逐項打勾的形式，並註明測試的裝置與瀏覽器，發現問題時才有辦法重現。
上線之後仍會反覆出現的行動版問題
響應式不是做完就一勞永逸。最常見的復發來源是內容更新：編輯上傳了一張比例特殊的圖片、貼上一段從其他文件複製過來帶有固定寬度的內容、或是新增了一個字數特別多的標題，都可能讓原本正常的版面在窄螢幕上破掉。這類問題不是程式壞了，而是內容超出了當初設計時預設的範圍。
因應方式有兩個方向。一是在設計階段就把極端狀況考慮進去，例如標題預留兩到三行的空間、圖片統一裁切比例、表格預設就有捲動機制。二是把內容規範寫成後台的操作指引，讓維護的同仁知道圖片該傳多大、標題盡量控制在多少字。定期用手機瀏覽自家網站的主要頁面，也是成本最低的檢查方式，很多問題其實只要有人看過就會被發現。
常見問題
響應式網站和另外做一個手機版網站有什麼差別？
響應式是同一份內容與網址，依照螢幕寬度調整版面；獨立手機版則是另一組頁面與網址。獨立手機版的維護成本較高，內容要維護兩份，網址與內容一致性也需要額外處理。除非有特殊需求，現在多數專案會選擇響應式，長期維護單純很多。
舊網站要改成響應式，是調整就好還是要重做？
要看原本的版面是怎麼寫的。如果整體結構使用固定寬度且版面耦合很深，逐頁修補的工時往往接近重做，還會留下難以維護的殘留樣式。比較實際的判斷方式是先做一次盤點，確認有多少種版型、各自的結構複雜度，再決定要局部改寫還是重新規劃。
一定要在真的手機上測嗎？用電腦模擬不行嗎？
模擬工具可以快速檢查版面斷點，但測不到觸控手感、實際網路速度、鍵盤跳出後的畫面變化，以及部分瀏覽器的差異。建議把模擬工具當成開發過程的快速檢查，正式驗收時仍要用實體裝置走過關鍵流程，兩者各自負責不同層次的問題。
行動版可以把部分內容隱藏起來嗎？
可以調整呈現方式，但要小心不是把內容整段拿掉。手機使用者需要的資訊通常和桌機一樣，只是閱讀順序與呈現密度不同。比較好的做法是收合、改成分頁或改變排序，讓內容仍然找得到；若真的判斷某段在小螢幕沒有意義，也要確認它不是搜尋或轉換所依賴的內容。
驗收時發現行動版跑版，算在建置範圍內嗎？
如果合約中約定網站需支援行動裝置，且問題出在原本就該正常呈現的頁面，通常屬於瑕疵修正而非新增需求。建議在合約中直接列出要支援的裝置類型與瀏覽器範圍，以及驗收採用的測試方式，這樣雙方在發生爭議時有明確依據，不必各自主張。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
加入京采 LINE 好友相關主題
下一步
如果你正在評估「rwd網站架設」相關的規劃，可以參考我們的網頁設計服務，或直接與我們聯繫，我們會依你的產業與現況給出務實的建議。