打開你的手機，瀏覽你自己公司的網站。文字是不是小到要放大才看得清？有沒有需要左右滑動才能看到完整內容？按鈕是不是太小很難點到？
如果答案是「是」，你正在流失超過 70% 的潛在客戶。
根據 Statcounter 的統計，2026 年台灣的網站流量有超過 70% 來自行動裝置。也就是說，大多數人第一次看到你的網站，是在手機上。如果手機上的體驗很差，他們會在 3 秒內離開，然後找到你的競爭對手。
一、什麼是 RWD 響應式設計？
RWD（Responsive Web Design，響應式網頁設計）是一種讓同一個網站能在不同螢幕尺寸上自動調整版面的設計方法。不管是 27 吋的桌上型螢幕、13 吋的筆電、10 吋的平板，還是 6 吋的手機，網站都能完美呈現。
RWD 的核心技術有三個：
- Viewport Meta 標籤 — 告訴瀏覽器按照裝置寬度來渲染頁面
- 流式佈局（Fluid Layout） — 使用百分比而非固定像素來定義寬度
- CSS Media Queries — 根據螢幕寬度套用不同的 CSS 樣式
二、Mobile-First：先做手機版
傳統的網頁設計是「Desktop-First」— 先做桌面版，再縮小到手機。但現在業界的最佳實踐是 Mobile-First：先設計手機版，再擴展到桌面。
為什麼？
- 手機的限制更嚴格 — 螢幕小、操作靠觸控、網速可能較慢。先在這些限制下做好設計，擴展到桌面時自然沒問題
- 強迫你思考重點 — 手機螢幕空間有限，你必須決定什麼內容最重要。這個思考過程會讓整個網站更精煉
- Google 用 Mobile-First Indexing — 2019 年起，Google 以手機版內容作為排名依據。手機版做不好，直接影響 SEO
三、Viewport Meta 標籤
所有 RWD 網站的第一步，就是在 HTML 的 <head> 中加入 viewport meta 標籤：
<meta name="viewport" content="width=device-width, initial-scale=1.0">這一行程式碼做了兩件事：
width=device-width— 告訴瀏覽器頁面寬度等於裝置螢幕寬度initial-scale=1.0— 初始縮放比例為 100%，不要自動縮小
沒有這行，手機瀏覽器會把你的網站當成桌面版來渲染，然後整個縮小塞進螢幕裡。結果就是字小到看不清、要放大才能操作。
四、CSS Media Queries 實作
Media Queries 是 RWD 的核心。它讓你可以根據螢幕寬度套用不同的 CSS 樣式：
/* 手機版（預設，Mobile-First） */
.container {
width: 100%;
padding: 16px;
}
/* 平板（768px 以上） */
@media (min-width: 768px) {
.container {
width: 720px;
margin: 0 auto;
}
}
/* 桌面（1024px 以上） */
@media (min-width: 1024px) {
.container {
width: 960px;
}
}常見的斷點（Breakpoints）：
- 576px — 大手機（如 iPhone Plus 系列橫向）
- 768px — 平板直向
- 1024px — 平板橫向 / 小筆電
- 1200px — 桌面螢幕
五、常見的手機版設計問題
即使加了 viewport 和 media queries，很多網站在手機上還是會出問題。以下是最常見的幾個：
- 橫向溢出（Horizontal Overflow） — 有元素寬度超過螢幕，出現左右捲軸。通常是圖片或表格沒有設定
max-width: 100% - 按鈕太小 — 手指觸控區域至少要 44x44 像素，太小的按鈕會讓使用者點不到
- 字體太小 — 手機上的最小可讀字體大小是 16px。更小的字需要放大才能閱讀
- 圖片太大 — 沒有針對手機提供較小的圖片，導致載入速度很慢
- 彈出視窗（Popup） — 在手機上關不掉或遮住整個畫面的彈出視窗，是使用者體驗的殺手
六、HEY!BOSS 的 Playwright 行動裝置 QA 稽核
在 HEY!BOSS 銀月數位顧問建置的 100 個品牌網站中，每一個都經過 Playwright 自動化行動裝置品質稽核。我們的測試腳本會模擬以下裝置：
- iPhone 14 Pro（390 x 844）
- Samsung Galaxy S23（360 x 780）
- iPad Air（820 x 1180）
每個裝置上會自動檢查：
- 橫向溢出檢測 — 頁面寬度是否超過 viewport 寬度
- 字體大小檢查 — 所有文字是否達到最小可讀大小
- 觸控目標檢查 — 可點擊元素是否大於 44x44 像素
- 圖片載入檢查 — 所有圖片是否正常載入、是否有設定 alt 文字
- 截圖對比 — 自動截圖並與基準圖片比對，檢測版面異常
這套自動化 QA 流程讓我們能在部署後幾分鐘內完成所有裝置的測試，而不是靠人工一個一個打開手機檢查。
「在手機時代，你的網站在手機上的樣子，就是你的品牌在客戶眼中的第一印象。」
不確定你的網站手機版有沒有問題？
HEY!BOSS 可以免費幫你做一次行動裝置相容性檢測，告訴你目前有哪些問題需要修正。