斷點是什麼？RWD 設計稿與驗收要看哪些寬度

斷點是什麼

斷點（Breakpoint）是版面切換的螢幕寬度門檻。例如寬度小於某個值時顯示單欄、超過就變成三欄——那個切換的數值就是斷點。

理解斷點的用處在於：看設計稿與驗收時，知道該檢查哪幾種寬度，而不是隨便縮一縮就當作測過了。

常見的斷點區間

實際數值各家做法不同，重點不是記住數字，而是知道至少要檢查這幾個區間。

最容易被漏掉的兩個

• 手機橫向——使用者轉個方向就會遇到，但很少被測試
• 大螢幕——內容如果沒有限制最大寬度，在寬螢幕上會被拉得很散，一行文字長到難以閱讀

設計稿階段要看什麼

多數廠商會提供電腦版與手機版兩份設計稿。確認時建議把這幾點看清楚：

一、內容的優先順序有沒有改變

電腦版並排的三個區塊，在手機上必須決定誰先誰後。這個順序是設計決策，不是技術問題，應該由您確認。

常見的錯誤是側邊欄的內容被排到最下面——如果那裡放的是聯絡資訊或重要訴求，等於被埋掉了。

二、有沒有內容在手機版消失

如果某些內容在手機版被隱藏，要問清楚原因。搜尋引擎以手機版為主要判斷依據，被隱藏的內容可能連帶損失搜尋能見度。

三、標題與文字的實際長度

設計稿常用短短的示意文字。請把真實的標題套進去看——「專業精密機械零組件加工服務」在手機上會變成幾行？版面還撐得住嗎？

四、圖片的裁切

橫幅圖片在手機上通常會被裁成接近方形。重要的人事物不要放在圖片邊緣，否則會被切掉。這一點在提供素材時就要考慮。

五、表格與長資料

超過三欄的表格在手機上很難呈現。設計稿要說明處理方式：橫向捲動、轉成卡片式、還是隱藏次要欄位。

驗收時的檢查方法

用實機，不要只用模擬器

電腦瀏覽器的手機模擬功能很方便，但測不出所有問題——特別是實際的觸控操作、字體渲染、以及某些瀏覽器的特殊行為。

建議至少準備 iPhone 與 Android 各一支實機。最省事的做法是請幾位同事各自用自己的手機開一次。

用縮放視窗做初步檢查

在電腦上把瀏覽器視窗慢慢縮窄，觀察版面在哪些寬度會重新排列。這可以快速找出明顯的破版點。

過程中特別注意：有沒有某個寬度區間版面是壞的——例如手機正常、電腦正常，但平板寬度時卡在中間變得很奇怪。

檢查清單

• 各斷點下版面都正常，沒有元素重疊或超出
• 沒有出現非預期的左右捲動
• 文字在最小螢幕上仍清楚可讀
• 圖片沒有變形或嚴重裁切
• 選單的每一層在手機上都能操作
• 表單可以完整填寫並送出
• 固定元素沒有遮住內容
• 手機橫向也正常

把測試範圍寫進驗收文件

這一點對雙方都是保障。驗收若沒有明確的測試範圍，日後任何一台特殊裝置上的顯示問題，都可能變成爭議。

合理的寫法是：支援主流瀏覽器的最新版與前一版，手機以主流機型的預設瀏覽器為測試基準，並列出實際測試過的裝置清單。

「支援所有裝置」這種寫法看似有保障，實際上無法執行也無法驗收。驗收的完整作法見網站驗收怎麼做。

上線後也要定期檢查

手機螢幕尺寸持續變化、瀏覽器每年更新。三年沒有調整的網站，會在某些新裝置上出現破版而沒人發現。

建議每季用手機實際開一次網站，走過主要頁面與表單。這件事只需要幾分鐘，但能及早發現問題。