MO STORIES
WordPress 手機跑版怎麼辦？RWD 問題排解完整指南（2026）
結論先講：手機跑版 90% 是 CSS 問題 跑版的根源通常就三個： ① 缺少 Viewport Meta Tag——手機不知道要縮放。 ② 有元素的寬度超出螢幕——通常是固定寬度（width: 1200px）惹的禍。 ③ 外掛 CSS 覆蓋了主題的響應式設定——關掉外掛就正常了。 以下是完整的 7 步排查流程。 什麼...
結論先講：手機跑版 90% 是 CSS 問題
跑版的根源通常就三個：
① 缺少 Viewport Meta Tag——手機不知道要縮放。
② 有元素的寬度超出螢幕——通常是固定寬度（width: 1200px）惹的禍。
③ 外掛 CSS 覆蓋了主題的響應式設定——關掉外掛就正常了。
以下是完整的 7 步排查流程。
什麼是手機跑版？
一句話：網站元素沒有正確適應螢幕寬度，導致版面錯亂。
常見跑版症狀和可能原因
| 症狀 | 可能原因 |
|---|---|
| 出現水平滾動條 | 有元素寬度超過螢幕 |
| 文字太小需要放大 | 缺少 Viewport Meta Tag |
| 圖片超出邊界 | 圖片沒設 max-width: 100% |
| 選單亂掉 | 響應式選單沒生效 |
| 區塊重疊 | CSS 位置衝突 |
Step 1：檢查 Viewport Meta Tag
這是最常被忽略的問題。Viewport Meta Tag 告訴瀏覽器：這個網站會自己處理縮放。
正確的寫法：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
檢查方式：
① Chrome 按 F12 開啟開發者工具。
② 切到 Elements 面板。
③ 在 <head> 裡搜尋「viewport」。
如果沒有這行，用「Insert Headers and Footers」外掛把它加到 Header 區塊。現代 WordPress 主題通常會自動產生，但如果你用的是很舊的主題，可能會漏掉。
Step 2：用 Chrome DevTools 測試
Chrome 內建的響應式測試工具很強大。
| 操作 | 方法 |
|---|---|
| 開啟 DevTools | 網站上按 F12 或右鍵 → 檢查 |
| 切換手機模式 | 點左上角的裝置切換圖示 |
| 選擇裝置 | 下拉選 iPhone、iPad、Galaxy 等 |
| 自訂尺寸 | 在「Responsive」模式輸入寬高 |
進階技巧：拖曳視窗邊緣測試各種寬度，勾選「Show media queries」看 CSS 斷點位置。
Step 3：找出超出寬度的元素
這是最常見的跑版原因。在 DevTools Console 貼上這段程式碼：
document.querySelectorAll('*').forEach(el => {
if (el.offsetWidth > document.documentElement.offsetWidth) {
console.log('超出寬度的元素:', el);
}
});
會列出所有寬度超過視窗的元素。
常見犯人和解法
| 元素 | 問題 | 解法 |
|---|---|---|
| 圖片 | 沒設 max-width | img { max-width: 100%; height: auto; } |
| 表格 | 內容太寬 | 外層包 overflow-x: auto |
| iframe | 固定寬度 | 用響應式 iframe wrapper |
| 區塊 | 設了 width: 1200px |
改成 max-width: 1200px |
Step 4：檢查主題的響應式設定
現代 WordPress 主題都支援 RWD，但設定可能沒開對。
如果你用 Elementor
| 步驟 | 操作 |
|---|---|
| ① | 進入 Elementor 編輯器 |
| ② | 點左下角的「響應式模式」 |
| ③ | 分別切到「平板」和「手機」檢視 |
| ④ | 調整每個元素在不同裝置的呈現 |
常見要調整的項目：Column 寬度（桌機 3 欄 → 手機 1 欄）、字體大小（桌機 48px → 手機 32px）、間距（桌機 50px → 手機 20px）。
如果你用 Gutenberg
① 選取區塊 → ② 右側面板找「進階」→ ③ 用「額外 CSS 類別」加自訂樣式。
Gutenberg 原生的響應式支援較弱，建議搭配 CSS Media Query 補強。
Step 5：檢查外掛相容性
有些外掛會注入 CSS，覆蓋主題的響應式設定。
排查流程：
① 前往「外掛」→ 暫時停用所有外掛。
② 用手機測試，看跑版是否解決。
③ 如果正常了，一個一個重新啟用。
④ 每啟用一個就測試一次，找出問題外掛。
常見問題外掛類型
| 外掛類型 | 為什麼容易出事 |
|---|---|
| Slider / 輪播 | 固定寬度、大量自訂 CSS |
| 彈出視窗（Popup） | 定位和尺寸常衝突 |
| 社群分享按鈕 | 浮動定位影響版面 |
| 頁面建構器 | 複雜的巢狀結構 |
Step 6：手動修復 CSS
找到問題元素後，用自訂 CSS 修復。
加 CSS 的路徑：外觀 → 自訂 → 額外的 CSS。
常用修復範例：
/* 圖片響應式 */
img {
max-width: 100%;
height: auto;
}
/* 表格可滾動 */
.table-wrapper {
overflow-x: auto;
}
/* iframe 響應式（16:9） */
.responsive-iframe {
position: relative;
padding-bottom: 56.25%;
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 | 跨裝置測試（有免費試用） |
| Responsinator | 線上快速預覽 |
| Google Mobile-Friendly Test | 檢查 Google 怎麼看你的手機版 |
排查順序總整理
| 順序 | 動作 | 解決什麼問題 |
|---|---|---|
| ① | 檢查 Viewport Meta Tag | 手機不縮放 |
| ② | 用 DevTools 找超寬元素 | 水平滾動條 |
| ③ | 檢查主題響應式設定 | 版面結構錯亂 |
| ④ | 停用外掛測試 | CSS 衝突 |
| ⑤ | 用自訂 CSS 修復 | 個別元素問題 |
| ⑥ | 真實裝置測試 | 模擬器遺漏的問題 |
跑版對 SEO 的影響
Google 使用 Mobile-First Indexing——主要看你的手機版網站。手機跑版會導致：
| 影響 | 後果 |
|---|---|
| Core Web Vitals 分數下降 | 排名因素之一 |
| 使用者跳出率增加 | 讀者看到亂版直接離開 |
| 搜尋排名下滑 | 手機版體驗差 = 排名差 |
延伸閱讀
| 你接下來要做的事 | 對應教學 |
|---|---|
| 搞懂 WordPress 基礎 | WordPress 是什麼？新手入門完整介紹 |
| 選對主題避免跑版 | WordPress 主題怎麼選？ |
| 做好安全維護 | WordPress 安全維護教學 |
| 從零架站 | WordPress 網站架設教學 |
常見問題 FAQ
Q1：付費主題應該支援 RWD，為什麼還是跑版？
可能原因：① 主題更新後設定被覆蓋 ② 自訂 CSS 蓋掉主題樣式 ③ 外掛 CSS 衝突 ④ 在 Page Builder 調整時不小心改到手機版設定。按 Step 5 的外掛排查流程走一遍通常能找到原因。
Q2：我不會寫 CSS，怎麼辦？
三個選擇：① 用 Elementor 等視覺化工具的響應式模式調整 ② 把問題描述丟給 ChatGPT，請它幫你生成修復 CSS ③ 找專業人員協助。
Q3：手機選單消失了，怎麼回事？
多數主題會在手機上把選單換成漢堡選單（三條線圖示）。檢查：① 漢堡按鈕顏色是否跟背景太接近 ② 選單是否被其他元素遮住（z-index 問題）③ JavaScript 錯誤導致選單無法展開。
Q4：跑版會影響 SEO 嗎？
會。Google 用 Mobile-First Indexing，主要看手機版。跑版會讓 Core Web Vitals 分數下降、跳出率增加、排名下滑。修好跑版是 SEO 的基本功。
想一次把手機體驗和 SEO 做好？可以看 WordPress SEO 診斷與修復顧問服務，或訂閱《用減法瘦生活》電子報，每週收到 WordPress 維護和優化的實用心法。
關於作者 | 10+ 經驗
MO 編輯
WordPress 效能優化專家 / MO Design Studio 共同創辦人
關注設計 × 工程的平衡協作，擅長以簡潔語言說故事。專門幫已有網站的品牌做速度升級。相信好網站不用重做，只需要正確的優化。
延伸閱讀
WordPress 網站架設教學：從零開始的完整步驟（2026）
>-...
WordPress 是什麼？2026 新手入門完整介紹（功能、費用、適合誰）
>-...
WordPress 安全維護教學：7 個步驟打造不被駭的網站（2026）
WordPress 是駭客最常攻擊的 CMS，但做好 7 個基本步驟就能擋掉 95% 的風險。這篇教你從更新、密碼、防火牆到備份，一步步強化網站安全。...
訂閱瘦生活電子報
每週一封故事信——分享如何用減法思維剔除雜訊、做對的事、過好生活。不說教，不推銷，只有真實的取捨紀錄。