你可能聽廠商講過這幾句：「這個要做 RWD」「我們設幾個斷點」「先看一下 viewport」。這三個詞常一起出現，因為它們合起來回答同一個問題——為什麼你的網站在電腦上好好的，到了手機卻跑版、字太小、要一直放大縮小？把這三個詞用「一件會自己合身的衣服」講清楚，下次看報價、跟廠商溝通，你就知道自己在買什麼、該問什麼。
為什麼這三個詞要一起講
因為它們是同一件事的三個角度：RWD 是「讓網站自動合身」的整體做法，斷點是「在哪些尺寸換版型」的規則，Viewport 是「使用者眼前那扇窗有多大」的量測基準。少了任何一個，手機體驗都會出問題。
RWD 響應式設計：一件會自己合身的衣服
一句話：同一份網站，自動適應手機、平板、電腦各種螢幕。日常類比：RWD 像一件會自己合身的彈性衣服——同一件，穿在不同身形上都貼合，而不是為每個人各做一件。業務情境：你開一家餐廳，菜單網站用 RWD，客人不管用手機查營業時間、還是用電腦看包廂資訊，畫面都自動排得好看好按，你只要維護一份內容。技術細節可參考 MDN 響應式設計指南。
斷點 Breakpoint：換版型的那幾個尺碼
一句話：畫面寬度到達某個數值時，版面切換成另一種排法。日常類比：斷點像衣服的 S／M／L 尺碼分界——身形跨過某個尺寸，就換一個版型才合身。網站也一樣：螢幕窄到某個寬度，三欄自動變一欄、選單收成漢堡圖示。業務情境：你的電商在電腦上一排四個商品，畫面變窄到平板斷點變兩個、到手機斷點變一個，客人不用瞇著眼睛也不用左右滑。斷點設得好不好，直接決定手機上好不好逛、好不好下單。
Viewport：使用者眼前那扇窗
一句話：使用者裝置實際能顯示網頁的可視範圍。日常類比：Viewport 像一扇窗——同樣的風景（你的網頁），透過大窗（電腦）和小窗（手機）看到的範圍不同。網頁要先正確告訴瀏覽器「這扇窗多大」，內容才不會被硬塞、硬縮。業務情境：很多網站在手機上字小到看不清，往往就是少了一行 viewport 設定，手機被迫用電腦的寬度硬縮。設定對了，內容才會依手機螢幕正常排。細節見 MDN Viewport 說明。
三者的關係（概念圖）
想像一條線：Viewport（量出這扇窗多大）→ 斷點（判斷這個寬度該用哪種版型）→ RWD（整體讓內容自動合身）。Viewport 提供尺寸資訊，斷點根據尺寸決定切換點，RWD 是把這一切組合起來的設計方法。三者串好，網站才能在任何螢幕上都好看好用。常見誤解：以為「響應式＝手機版縮小版」。錯——好的 RWD 不是把電腦版縮小，而是在不同斷點重新安排內容優先順序，讓手機使用者先看到最重要的東西。
對客戶決策的具體影響
這三個詞直接關係到錢、時程與生意：手機體驗差會流失客人，也會傷 Google 排名（Google 以行動優先索引為主）。報價時，RWD 通常內含；額外工時多半花在「複雜版面在不同斷點的重排」與「跨裝置測試」。把手機體驗當驗收重點，比事後補救便宜得多。
該問廠商的問題
- 「報價有沒有含 RWD？測到哪些裝置與螢幕尺寸？」——確認手機、平板都在範圍內，不是只做電腦版。
- 「斷點是怎麼設的？手機上重要資訊會不會被擠到最下面？」——確保內容優先順序有為手機重新安排。
- 「viewport 設定正確嗎？能不能在幾支真實手機上實測給我看？」——用真機驗收，別只信模擬器。
常見問題 FAQ
做手機版是不是要另外算一筆錢？
現代做法不是「做兩個網站」，而是用一套 RWD 響應式設計讓同一份內容自動適應各種螢幕，成本通常內含在網站報價裡。真正會另外花時間的，是版面在不同斷點需要大幅重排、或有複雜互動元件。問廠商『報價含不含 RWD、測到哪些裝置』就能問出差別。
我的網站在手機上跑版、字太小，是壞掉了嗎？
多半不是壞掉，是沒設好 Viewport 或斷點。常見原因是缺少 viewport 設定，導致手機用桌機寬度硬縮；或斷點沒涵蓋到某些尺寸。這類問題通常修起來不難，請廠商檢查 viewport 與斷點設定即可。
響應式和『另外做一個手機版網站』差在哪？
響應式是一份程式碼、一個網址，自動適應所有螢幕，維護一次到位。另做手機版（m. 開頭）是兩套要各自維護、容易內容不同步，也對 SEO 不利。除非有特殊理由，現在幾乎都用響應式。
手機體驗會影響 Google 排名嗎？
會。Google 採行動優先索引，以手機版內容為主要評估依據，手機上載入慢、跑版、字太小都可能影響排名與轉換。手機體驗不只是好不好看，是實打實的生意問題。
行動呼籲
想知道你的網站在手機上有沒有踩到這三個坑？我們可以幫你做一次快速的跨裝置健檢，看 RWD、斷點與 viewport 是否設定到位，並給出改善清單。先免費諮詢：
- Email：[email protected]
- 電話：0916-224-047
- LINE：@ufv9089p