RWD 網站製作常見錯誤:8 個症狀根因與修補做法完整指南

RWD 響應式網站不是讓網頁「會縮放」就完成了。許多網站在桌機看起來漂亮、設計稿過得了驗收，但實際上線後手機版出現文字太小、按鈕誤觸、圖片跑版、選單卡關、表單送不出去等問題——使用者看得懂卻用不順，最後直接離開。本文把這些問題拆成 8 個常見錯誤，每個錯誤都以「症狀 → 根因 → 修補做法」的結構說明，協助您判斷自家網站有沒有這些問題，並知道怎麼修。

一、為什麼 RWD 網站會跑出問題

RWD 網站跑出問題，通常不是技術做錯，而是設計流程把手機版當成桌機版的附屬品。

最常見的失敗路徑:

1. 設計師先做完桌機版設計稿。
2. 客戶驗收桌機版視覺後簽核。
3. 前端工程師依設計稿開發桌機版。
4. 才開始「補做」手機版——但此時內容順序、版面結構、互動模式都已經以桌機版為前提。
5. 手機版只能在既有架構上「擠進去」。

這個流程的核心問題是:手機版的設計決策被排在最後，且只能在桌機版的約束下進行。許多本文後續會提到的錯誤，根因都在這個流程上。

要根本性避免這些錯誤，應該採用 mobile-first 設計流程——這部分屬於設計階段該怎麼做，完整指南請見 手機版首頁應該怎麼設計。本文聚焦的是「網站已經做出來、跑出問題了該怎麼修」。

兩種出問題的時機

不論是哪一種，本文的「症狀 → 根因 → 修補」流程都適用。

二、診斷流程:6 個訊號告訴您網站有問題

修補錯誤前，先確認自家網站到底有沒有問題、有什麼問題。以下 6 個訊號是判斷的起點。

訊號 1:手機版跳出率 > 70%

進 GA4 → 報表 → 技術 → 概觀，看「裝置類別」中手機版的跳出率。

如果手機跳出率明顯比桌機高(高 20% 以上)，代表問題集中在手機體驗。

訊號 2:Search Console 出現「行動裝置可用性」錯誤

進 Google Search Console → 體驗 → 行動裝置可用性，看是否有錯誤頁面。常見錯誤類型:

• 文字太小無法閱讀
• 可點擊元素彼此太近
• 內容寬度超過螢幕
• viewport 未設定

任何一項錯誤都應該優先處理，因為這直接影響 SEO 排名。

訊號 3:手機版 Core Web Vitals 不及格

Search Console → 體驗 → 核心網頁指標。手機版三項指標目標值:

• LCP < 2.5 秒
• INP < 200ms
• CLS < 0.1

任一項標示為「不良」即代表使用者實際遇到效能問題。詳細排錯做法見本文第十節。

訊號 4:客戶反映或業務回饋「網站不好用」

最直接的訊號。常見客戶反映:

• 「字看不到，要放大」→ 字級或對比問題
• 「按鈕按不到」→ 按鈕尺寸或間距問題
• 「表單送不出去」→ 表單驗證或 JS 問題
• 「圖片載很久」→ 圖片優化或 LCP 問題
• 「找不到聯絡方式」→ 動線或 CTA 問題

訊號 5:手機詢問轉換率 < 桌機詢問轉換率的 0.5 倍

GA4 設定詢問完成事件後，比較手機版與桌機版的轉換率。正常情況下手機版轉換率應該是桌機的 0.7 倍以上(因為手機使用者較多元、轉換意願較分散)。

如果手機版轉換率不到桌機的 0.5 倍，通常代表手機漏斗某個階段有結構性問題(首屏、CTA、表單三選一)。

訊號 6:行動裝置流量佔比偏低於同產業

如果同產業手機流量佔比是 70%，但您的網站只有 40%，這不一定是市場行為——可能是手機版體驗太差導致手機使用者搜不到、進不來、進來就跑。

三、錯誤 1:電腦版好看但手機版難用

症狀

• 桌機版視覺完整、排版漂亮，但手機版滑動很久才看到重點
• 桌機版的多欄內容在手機上變成過長的單欄堆疊
• 桌機版的首頁 Banner 在手機版佔滿整個首屏，重要 CTA 在第 2 屏才出現
• 桌機版的元素全部保留，手機版資訊過載

根本原因

最常見的原因是「只做桌機版設計稿，手機版只是縮放」。這代表設計階段就沒有為手機版重新規劃內容順序——使用者在手機上看到的，是被擠進去的桌機版內容。

修補做法

完整修補需要重新規劃內容順序(屬於設計階段，請見 手機版首頁應該怎麼設計 第十節)。但若不重做整站，可以從這三個快速修補著手:

CSS 範例(用 flexbox 的 order 重排手機版內容順序，不影響桌機):

@media (max-width: 768px) {
  .hero-image { order: 1; }
  .hero-headline { order: 2; }
  .hero-cta { order: 3; }       /* CTA 上提 */
  .brand-story { order: 4; }    /* 品牌故事下推 */
}

四、錯誤 2:圖片跑版或重點被裁切

症狀

• 首頁 Banner 在手機版只看到背景，人物或產品不見了
• 案例列表的圖片高低不一，版面凌亂
• 圖片載入很久才出現，使用者已經滑過去了
• 圖片中的文字在手機版看不清楚

根本原因

• 單一圖檔同時供桌機與手機使用:桌機 1920×800 的橫幅圖直接縮成 375 寬，重點當然被擠掉
• 圖片沒設定 object-fit 或 object-position:縮放時不知道該保留哪部分
• 沒用 srcset 提供多解析度:手機載入桌機版 2MB 的大圖
• 重要文字寫在圖內:縮小後變模糊，AI 引擎也讀不到

修補做法

修補 1:用 <picture> 為手機提供不同裁切

<picture>
  <source media="(min-width: 1024px)" srcset="hero-desktop.webp">
  <source media="(min-width: 480px)" srcset="hero-tablet.webp">
  <img src="hero-mobile-portrait.webp" alt="..."
       width="800" height="1000">
</picture>

桌機載寬版橫圖，手機載直版裁切——確保重點不消失。

修補 2:用 object-fit 控制裁切焦點

如果只能用一張圖，至少要設 object-fit 與 object-position:

.hero-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center 30%;  /* 把焦點往上挪，保留人物上半身 */
}

修補 3:用 srcset 提供多解析度

<img src="photo-800.webp"
     srcset="photo-400.webp 400w，
             photo-800.webp 800w，
             photo-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw， 50vw"
     loading="lazy"
     width="800" height="600"
     alt="...">

修補 4:圖片內的文字改用 HTML

把圖片中的標題、口號、CTA 文字搬出來，用 HTML + CSS 疊在圖片上方:

<div class="hero">
  <picture>
    <source media="(min-width: 768px)" srcset="bg-desktop.webp">
    <img src="bg-mobile.webp" alt="">
  </picture>
  <h1 class="hero-title">企業網站設計與 SEO 內容規劃</h1>
  <a class="hero-cta" href="/contact">預約初步諮詢</a>
</div>

這樣做的好處:手機版字級可以獨立控制、Google 與 AI 引擎能讀到、改文案不用重做圖片。

修補 5:圖片必須宣告 width 與 height 屬性

這是 CLS(Core Web Vitals 之一)的關鍵——沒宣告尺寸的圖片載入時會造成版面位移。即使響應式縮放，也要宣告原始尺寸:

<img src="photo.webp" width="800" height="600" style="width:100%; height:auto" alt="...">

五、錯誤 3:手機版選單操作不順

症狀

• 漢堡 icon 太小，要按好幾次才點到
• 選單展開後內容太擠，項目擠在一起容易誤觸
• 子選單層級太深，要點 3–4 次才找到目標頁面
• 關閉按鈕(X)位置不明顯，使用者卡在選單裡
• 選單展開時遮住內容，看不到頁面狀態
• 漢堡選單裡找不到「聯絡我們」入口

根本原因

• 漢堡 icon 的點擊熱區沒擴展:視覺上 24px，熱區也只有 24px
• 項目高度低於 44px:手指容易點到隔壁項目
• 直接複製桌機版選單結構:桌機 3 層導覽搬到手機上仍是 3 層
• 聯絡入口放在選單最底下:使用者要滑很久才看到

修補做法

修補 1:擴大漢堡 icon 點擊熱區

<button class="hamburger" aria-label="開啟選單">
  <span class="icon"></span>
</button>

.hamburger {
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
}

.hamburger .icon {
  width: 24px;
  height: 24px;
  /* icon 視覺上 24px，但按鈕熱區 44px */
}

修補 2:每個選單項目高度至少 44px

.mobile-menu li {
  padding: 14px 16px;
  min-height: 44px;
  border-bottom: 1px solid rgba(0， 0， 0， 0.05);
}

修補 3:壓平選單層級

如果原本是 3 層(主選單 → 服務 → 服務子項目)，改成 2 層:

• 主選單放「服務(總入口)」
• 點進去看到「服務總覽頁」，再列出所有子服務
• 這樣使用者最多點 2 次就到目標頁，比 3 層好得多

修補 4:把聯絡入口移到選單最上方或固定位置

<nav class="mobile-menu">
  <a href="/contact" class="cta-top">預約初步諮詢</a>
  <ul>
    <li><a href="/">首頁</a></li>
    <li><a href="/services">服務</a></li>
    <li><a href="/cases">案例</a></li>
    <li><a href="/about">關於我們</a></li>
  </ul>
</nav>

修補 5:確保關閉按鈕清楚

關閉按鈕(通常是 X icon)放在選單展開後的右上角，尺寸與漢堡 icon 同標準(視覺 24–32px、熱區 44×44px)。

六、錯誤 4:按鈕太小或誤觸率高

症狀

• 使用者反映「按鈕按不到」「常常按錯」
• 兩個按鈕並排，使用者只想按其中一個卻同時觸發
• 文字連結密集排列，手指點不到正確的連結
• 連結看起來像按鈕但其實只有文字可點

根本原因

• 按鈕高度低於 44px(Apple HIG 標準)或 48dp(Material Design 標準)
• 按鈕之間間距低於 8px
• 點擊熱區只包到文字，沒有擴展到背景
• CTA 文字模糊(「送出」「更多」)，使用者不確定該不該點

修補做法

修補 1:按鈕尺寸最小 44px

.btn {
  min-height: 44px;
  padding: 12px 24px;
  font-size: 16px;        /* 同樣避免 iOS Safari 縮放 */
}

.btn-primary {
  min-height: 52px;       /* 主 CTA 更高 */
  width: 100%;            /* 手機版滿版 */
}

修補 2:按鈕之間至少 8–16px 間距

.button-group .btn + .btn {
  margin-left: 16px;     /* 按鈕之間 16px */
}

@media (max-width: 768px) {
  .button-group {
    flex-direction: column;
  }
  .button-group .btn + .btn {
    margin-left: 0;
    margin-top: 12px;    /* 垂直排列時 12px */
  }
}

修補 3:點擊熱區擴展到整個按鈕區域

整張卡片可點擊:

<a href="/services/web-design" class="service-card">
  <h3>企業網站設計</h3>
  <p>建立清楚品牌形象與服務介紹架構</p>
  <span class="cta">查看服務 →</span>
</a>

.service-card {
  display: block;
  padding: 24px;
  text-decoration: none;
  /* 整張卡片都是連結 */
}

修補 4:CTA 文字具體化

七、錯誤 5:表單在手機版不好填或送不出去

症狀

• 表單欄位太多，使用者填到一半就放棄
• 兩個欄位左右並排，在手機上看起來擠成兩半
• 點電話欄位跳出文字鍵盤，要切換成數字鍵盤
• 點 Email 欄位跳出文字鍵盤，沒有 @ 與 . 快捷鍵
• 填到最後一個欄位送出時報錯，但不知道哪裡錯
• 送出後沒有任何回饋，不知道有沒有成功

根本原因

• <input> 沒設定正確的 type 屬性:iOS 與 Android 看不出該跳什麼鍵盤
• 欄位左右並排:在 375px 寬度下變成兩個窄欄
• 欄位字級 < 16px:iOS Safari 會自動縮放整個頁面(破壞版面)
• 錯誤提示只在送出後一次顯示:使用者不知道是哪個欄位錯
• 送出後沒有成功訊息:使用者懷疑沒送出

修補做法

修補 1:設定正確的 input type

<input type="text" name="name" placeholder="姓名">
<input type="tel" name="phone" placeholder="0912-345-678" inputmode="tel">
<input type="email" name="email" placeholder="example@gmail.com">
<input type="number" name="budget" placeholder="預算(元)">

修補 2:欄位字級至少 16px

input， textarea， select {
  font-size: 16px;        /* 不能小於 16px */
}

修補 3:欄位改為單欄垂直排列

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }
  .form-row > * {
    width: 100%;
    margin-bottom: 12px;
  }
}

修補 4:即時驗證 + 具體錯誤提示

不要等送出才一次顯示所有錯誤。使用者離開欄位(onBlur)就驗證:

<div class="field">
  <input type="email" required oninput="validate(this)">
  <span class="error" id="email-error"></span>
</div>

錯誤訊息要具體:

修補 5:送出後完整回饋

<div class="success-message" hidden>
  <h2>您的需求已成功送出</h2>
  <p>我們會在 1–2 個工作天內回覆。</p>
  <p>若需立即聯絡，請撥打 <a href="tel:+886422609770">04-2260-9770</a></p>
</div>

同時應該寄出確認信到使用者 Email，內容包含表單副本與承諾回覆時間。這能大幅降低「使用者送出後又再寄一次」的狀況。

八、錯誤 6:表格與多欄內容在手機版壞掉

症狀

• 桌機版的方案比較表在手機上需要左右滑動才能看完
• 三欄並排的服務卡片在手機上擠成一團或變得太瘦
• 規格表的數字欄位重疊或截斷
• 流程圖中的文字小到看不見

根本原因

• 直接把桌機表格 <table> 縮放給手機看
• CSS Grid 或 Flexbox 沒設斷點:永遠 3 欄
• 沒有為手機版重新設計呈現方式

修補做法

修補 1:把方案比較表改成卡片式

桌機版可能是:

手機版改成獨立卡片:

<div class="plan-cards">
  <div class="plan-card">
    <h3>基礎方案</h3>
    <p>適合對象:A</p>
    <p>價格:$X</p>
    <ul>... 內容 ...</ul>
    <a href="/contact?plan=basic">了解基礎方案</a>
  </div>
  <!-- 其他方案 -->
</div>

CSS 用斷點切換:

.plan-cards {
  display: grid;
  grid-template-columns: 1fr;     /* 手機單欄 */
  gap: 16px;
}

@media (min-width: 768px) {
  .plan-cards {
    grid-template-columns: repeat(3， 1fr);  /* 桌機三欄 */
  }
}

修補 2:規格表保留橫向滑動 + 明確提示

如果資料量真的大(例如完整規格表)，保留橫向滑動，但要加提示:

<div class="table-scroll-wrapper">
  <p class="scroll-hint">← 可左右滑動查看完整比較 →</p>
  <table>...</table>
</div>

.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* iOS 流暢滑動 */
}

.scroll-hint {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin-bottom: 8px;
}

@media (min-width: 1024px) {
  .scroll-hint { display: none; }     /* 桌機隱藏提示 */
}

修補 3:流程圖改成步驟卡片

桌機橫向 5 步流程圖，手機改成垂直 5 個卡片，每張卡片有步驟編號、標題、說明:

<ol class="process-steps">
  <li>
    <span class="step-number">1</span>
    <h4>初步諮詢</h4>
    <p>了解專案目標、預算與時程</p>
  </li>
  <!-- 步驟 2–5 -->
</ol>

.process-steps {
  display: flex;
  flex-direction: column;     /* 手機垂直 */
  gap: 24px;
}

@media (min-width: 1024px) {
  .process-steps {
    flex-direction: row;       /* 桌機水平 */
  }
}

九、錯誤 7:平板與特殊尺寸沒測試

症狀

• iPhone 看起來正常，但 Android 大螢幕手機跑版
• 手機與桌機都好，平板(768–1024px)出現大片空白或內容過擠
• 手機橫式(landscape)的版面亂掉
• 摺疊機展開後(如 Galaxy Fold 1812px)版面失控

根本原因

• 只測一兩個尺寸:通常是 iPhone 與設計師的筆電
• 斷點設在「裝置寬度」而非「內容寬度」:例如只設 768px 一個斷點
• 沒測橫式:iPhone 直式 393px 與橫式 852px 的版面需求不同
• 沒測超寬螢幕:版面內容左右拉太寬，閱讀體驗下降

修補做法

修補 1:建立完整斷點測試清單

修補 2:補上平板尺寸的特殊處理

平板尺寸常被忽略。如果直接從手機版單欄跳到桌機版三欄，平板上會出現「兩欄就好但被擠成三欄」的擁擠狀態。可以加一個中間斷點:

.grid {
  grid-template-columns: 1fr;        /* 手機單欄 */
}

@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }   /* 平板雙欄 */
}

@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(3， 1fr); }   /* 桌機三欄 */
}

修補 3:用真機而非只用模擬器

Chrome DevTools 的「裝置模擬」雖然方便，但無法模擬:

• iOS Safari 的觸控延遲
• Android 不同瀏覽器(Chrome / Samsung Internet)的渲染差異
• 真實手機的字體渲染(特別是中文字)
• 真實網路速度(4G / 5G / Wi-Fi)

公司至少要備一台 iPhone、一台 Android 手機、一台平板，作為驗收標配。如果預算允許，可以用 BrowserStack 或 LambdaTest 等雲端真機平台補充。

修補 4:超寬螢幕加 max-width

大型桌機(≥ 1440px)上，內容若拉滿整個寬度，每行文字會超過 75 字，閱讀疲勞。設個 max-width:

.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

十、錯誤 8:Core Web Vitals 不及格

症狀

• Google Search Console 顯示「核心網頁指標」有「不良」頁面
• PageSpeed Insights 手機版分數 < 70
• 使用者反映「網站好慢」「滑下去版面會跳」
• Google 搜尋排名近期下滑

根本原因(依三項指標拆解)

LCP(最大內容繪製)> 2.5 秒

• 首屏圖片太大(沒用 srcset 提供小版本給手機)
• 首屏圖片沒設 fetchpriority="high"
• 圖片格式還在用 JPEG(沒換 WebP / AVIF)
• 字型檔載入順序錯誤，文字延遲渲染

INP(互動延遲)> 200ms

• JavaScript bundle 過大，主執行緒卡頓
• 滾動監聽器太重(scroll handler 沒節流)
• 第三方 script(追蹤碼、客服外掛、廣告)拖慢互動
• React/Vue 元件渲染時 layout thrashing

CLS(版面位移)> 0.1

• 圖片沒宣告 width / height 屬性
• 廣告或第三方嵌入元件動態插入，沒預留空間
• 字型載入造成的 FOIT / FOUT
• 動態插入的橫幅或浮動元件

修補做法

修補 LCP

<!-- 首屏圖片用 fetchpriority="high" 優先載入 -->
<img src="hero.webp"
     fetchpriority="high"
     srcset="hero-400.webp 400w， hero-800.webp 800w， hero-1600.webp 1600w"
     sizes="100vw"
     width="800" height="450"
     alt="...">

<!-- 字型用 preload 避免延遲 -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

修補 INP

// 滾動事件用 throttle，不要每次滾動都跑
let ticking = false;
window.addEventListener('scroll'， () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      // 處理滾動邏輯
      ticking = false;
    });
    ticking = true;
  }
});

// 大量 DOM 操作用 documentFragment 批次更新
const fragment = document.createDocumentFragment();
items.forEach(item => fragment.appendChild(createItem(item)));
container.appendChild(fragment);

修補 CLS

<!-- 圖片必須宣告原始尺寸 -->
<img src="photo.webp" width="800" height="600" style="width:100%; height:auto" alt="...">

<!-- 字型用 font-display: optional 或 fallback 避免位移 -->
<style>
@font-face {
  font-family: 'Main';
  src: url('main.woff2') format('woff2');
  font-display: optional;
}
</style>

<!-- 廣告 / 嵌入元件預留高度 -->
<div class="ad-container" style="min-height: 250px">
  <!-- 廣告載入後不會擠壓周圍內容 -->
</div>

十一、診斷工具與排錯工具清單

本文每個錯誤都需要工具確認與驗收。以下是實用的工具清單，依場景分類。

即時診斷工具

真機測試平台

設計驗收與斷點檢查

手機版分析

十二、RWD 網站體檢清單

把前面所有錯誤整合成一張快速體檢表，可用於上線驗收或定期回檢。

即時體檢清單

如果其中多項不合格，代表網站雖然有 RWD 架構，但手機與平板體驗仍需要重新優化。

體檢頻率建議

十三、結論:好的 RWD 是讓使用者在任何裝置都「用得順」

RWD 網站製作最常見的問題，不是網站不能在手機上打開，而是手機版實際使用起來不順。本文 8 個錯誤的共通點是「只考慮桌機版視覺，沒有針對手機重新規劃」——電腦版好看但手機版難用、圖片比例跑版、選單不好操作、按鈕太小、表單不好填、表格擠成一團、平板被忽略、Core Web Vitals 不及格。

每一個錯誤都可以用「症狀 → 根因 → 修補做法」的流程處理。若不確定自家網站有沒有問題，可以從本文第二節的 6 個診斷訊號開始檢查;若已知有問題，可對照第三到第十節找對應修補做法;若是改版時機，第十二節的體檢清單可作為驗收標準。

十四、常見問答 FAQ