WordPress 手機跑版怎麼辦？RWD 響應式設計問題排解完整指南 (2026)

先說結論

手機跑版 90% 是 CSS 問題，不是 WordPress 本身的問題。

檢查 Viewport Meta Tag — 少了這行，手機就不會縮放
找出 CSS 衝突 — 通常是固定寬度 (width: 1200px) 惹的禍
測試主題和外掛相容性 — 關掉外掛，一個一個開回來

這篇文章會帶你一步步排查問題，找出跑版的真正原因。

MO's Take (我的觀點)

💡 為什麼這很重要？ 2019 年我幫一家餐廳架站，桌機上看起來很漂亮。結果老闆打電話來說：「我用手機看，選單跑到畫面外面了！」我自己用手機測也正常，後來才發現——他用的是 iPhone SE (第一代)，螢幕只有 4 吋。從那次之後，我學到一件事：你的測試裝置不等於使用者的裝置。 RWD 不是「有做就好」，要在各種螢幕尺寸都測過才算數。

什麼是手機跑版？

一句話：「跑版」就是網站元素沒有正確適應螢幕寬度，導致版面錯亂。

常見的跑版症狀：

症狀	可能原因
出現水平滾動條	有元素寬度超過螢幕
文字太小需要放大	缺少 Viewport Meta Tag
圖片超出邊界	圖片沒設 max-width: 100%
選單亂掉	響應式選單沒生效
區塊重疊	CSS 位置衝突

Step 1：檢查 Viewport Meta Tag

這是最常被忽略的問題。

什麼是 Viewport Meta Tag？

它告訴瀏覽器：「這個網站會自己處理響應式設計，不要縮放。」

正確的 Viewport Meta Tag：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

檢查方式：

用 Chrome 開發者工具 (F12)
切換到 Elements 面板
在 <head> 區塊搜尋「viewport」

如果沒有，怎麼加？

在 WordPress 中，這行通常由主題自動產生。如果沒有：

安裝「Insert Headers and Footers」外掛
把 viewport meta tag 貼到 Header 區塊
儲存

Step 2：使用 Chrome DevTools 測試

Chrome 內建的響應式測試工具非常強大。

開啟方式：

在網站上按 F12 或右鍵 > 檢查
點擊左上角的「裝置切換」圖示 (長得像手機和平板)
選擇要模擬的裝置 (iPhone, iPad, Galaxy 等)

進階技巧：

拖曳視窗邊緣，測試各種螢幕寬度
在「Responsive」模式下輸入自訂尺寸
勾選「Show media queries」看斷點位置

Step 3：找出超出寬度的元素

這是最常見的跑版原因。

診斷方式：

在 DevTools Console 貼上這段程式碼：

document.querySelectorAll('*').forEach(el => {
  if (el.offsetWidth > document.documentElement.offsetWidth) {
    console.log('超出寬度的元素:', el);
  }
});

這會列出所有寬度超過視窗的元素。

常見犯人：

元素	問題	解法
圖片	沒設 max-width	加 `img { max-width: 100%; }`
表格	內容太寬	用 `overflow-x: scroll` 包起來
iframe	固定寬度	用響應式 iframe wrapper
區塊	設了 width: 1200px	改成 max-width: 1200px

Step 4：檢查主題的響應式設定

現代 WordPress 主題都支援 RWD，但設定可能沒開。

如果你用 Elementor

進入 Elementor 編輯器
點擊左下角的「響應式模式」
分別切換到「平板」和「手機」檢視
調整每個元素在不同裝置的呈現

常見設定：

Column 寬度 (桌機 3 欄、手機 1 欄)
字體大小 (桌機 48px、手機 32px)
間距 (桌機 margin 50px、手機 20px)

如果你用 Gutenberg

選取區塊
在右側設定面板找「進階」
使用「額外 CSS 類別」加自訂樣式

Gutenberg 原生的響應式支援較弱，建議用 CSS Media Query 補強。

Step 5：檢查外掛相容性

有些外掛會注入 CSS，覆蓋主題的響應式設定。

排查方式：

前往「外掛」> 暫時停用所有外掛
用手機測試，看看跑版是否解決
如果解決了，一個一個重新啟用
每啟用一個就測試一次，找出問題外掛

常見問題外掛類型：

Slider/輪播
彈出視窗 (Popup)
社群分享按鈕
頁面建構器

Step 6：手動修復 CSS

如果找到問題元素，可以用自訂 CSS 修復。

在 WordPress 加自訂 CSS：

前往「外觀」>「自訂」>「額外的 CSS」
加入你的修復程式碼
即時預覽效果
發布

常用修復範例：

/* 圖片響應式 */
img {
  max-width: 100%;
  height: auto;
}

/* 表格可滾動 */
.table-wrapper {
  overflow-x: auto;
}

/* iframe 響應式 */
.responsive-iframe {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 隱藏特定元素在手機上 */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none;
  }
}

Step 7：測試真實裝置

DevTools 的模擬不是 100% 準確。

建議測試的裝置：

類型	建議測試
iOS	iPhone SE, iPhone 15
Android	Samsung Galaxy, Pixel
平板	iPad, Android Tablet

免費測試工具：

BrowserStack (有免費試用)
LambdaTest
Responsinator (線上測試)

常見問題 FAQ

Q: 我用的是付費主題，應該支援 RWD 才對，為什麼還是跑版？

A: 可能原因：

主題更新後設定被覆蓋
你加的自訂 CSS 覆蓋了主題樣式
外掛 CSS 衝突
你在 Page Builder 調整時不小心改到手機版設定

Q: 我不會寫 CSS，怎麼辦？

A: 建議：

先用 Elementor 等視覺化工具調整
用 ChatGPT 幫你生成 CSS (告訴它問題和想要的效果)
找專業人員協助

Q: 為什麼我的選單在手機上消失了？

A: 大多數主題會在手機上把選單換成「漢堡選單」(三條線)。檢查：

漢堡按鈕的顏色是否跟背景太接近
選單是否被其他元素遮住 (z-index 問題)
JavaScript 錯誤導致選單無法展開

Q: 跑版會影響 SEO 嗎？

A: 會。Google 使用 Mobile-First Indexing，代表它主要看你的手機版網站。手機跑版可能導致：

Core Web Vitals 分數下降
使用者跳出率增加
排名下滑

總結

手機跑版通常不是大問題，只要按步驟排查就能找到原因。

排查順序：

✅ 檢查 Viewport Meta Tag
✅ 用 DevTools 找出超寬元素
✅ 檢查主題響應式設定
✅ 停用外掛測試
✅ 用自訂 CSS 修復
✅ 真實裝置測試

現在就做：

📝 用手機開啟你的網站，看看有沒有問題
🔧 用 DevTools 的裝置模擬器檢查

👉 延伸閱讀：WordPress 速度優化讓網站快到訪客無法離開

資料來源

Google Mobile-Friendly Test
MDN Web Docs: Viewport Meta Tag
MO design studio 網站維護經驗