---
title: 網頁跑版怎麼查：快取、CSS 還是外掛衝突
description: 手機版跑版、寬螢幕右側多出空白、字型忽然不一樣？先排除快取，再從自訂 CSS 與外掛衝突下手。
url: "https://wptoolbear.com/docs/wordpress-layout-broken-mobile-desktop/"
updated: "2026-09-13"
category: 錯誤排除（白畫面、500、跑版）
---

# 網頁跑版怎麼查：快取、CSS 還是外掛衝突

**快速答案：**跑版通常是三種之一：改了樣式但快取還在送舊 CSS；某段自訂 CSS 或程式碼片段蓋掉了全站；外掛或佈景更新後衝突。先用無痕視窗看、清全部快取，再用瀏覽器開發者工具找出是哪個元素撐開版面。

## 為什麼會這樣

WordPress 的版面是佈景、頁面編輯器（Elementor 等）、各外掛輸出的 CSS 疊起來的，任何一層變動都可能影響別的區塊。常見情境：手機版沒設響應式尺寸、寬螢幕沒設最大寬度、容器寬度寫死、舊站複製過來的 CSS 片段用了太廣的選擇器、外掛更新後 class 名稱變了。

## 怎麼處理

1. 排除快取：無痕視窗開網頁；清 WordPress 快取外掛、主機快取、CDN 三層。「改了 CSS 沒變」八成在這裡。
2. 分裝置：只有手機壞，到 Elementor 的響應式模式看手機版的字級、間距、隱藏元素；只有寬螢幕壞，多半是容器沒設 max-width，或背景圖用 cover 沒設定位。
3. 開發者工具（F12）：橫向捲軸或右側空白，在 Console 找 `scrollWidth` 大於 `clientWidth` 的元素，通常是某容器寫死寬度或 flex 不能縮；元素樣式不一致，看 Computed 是哪個 CSS 檔在覆蓋。
4. 查全站自訂 CSS：外觀 → 自訂 → 額外 CSS、Elementor → 網站設定 → 自訂 CSS、程式碼片段外掛。舊站搬來的片段常用 `body span, body div` 這種選擇器蓋掉全站字型。
5. 外掛衝突：把最近更新的外掛逐一停用測試，特別是 header/footer 注入類、字型類、優化類（延遲載入 CSS）。
6. iPhone Safari 專屬怪象（電話號碼變藍、變另一種字型）：是 Safari 自動偵測電話號碼，加 `format-detection` meta 或把號碼包成 tel 連結。

## 我們實際遇過的情況

一個企業站電腦版右側多出空白加橫向捲軸，客戶懷疑是剛加的字級縮放工具。量測後確認不是它，是頁尾容器的「Flex 尺寸」設成不縮、寬度又寫死，兩欄相加超過畫面；改成 Shrink 之後溢出歸零，一行 CSS 都沒動。同一站的頁尾傳真號碼字型跟上一行不一樣，查出來是全站字型被一段舊的片段覆蓋，先修頁尾；同一天還有 iPhone 上號碼顏色跟著變掉，那是 Safari 的電話自動偵測，第一次改的選擇器抓錯，第二次改用 format-detection meta 才修好。

一個內容網站的 Elementor 頁改了樣式前台一直不變，原因是 CDN 把樣式檔快取了一年；改掉全站的 Elementor CSS 輸出方式才解決。一家電商的頁尾整個消失，是跟一支「Header/Footer 插入碼」外掛相衝，停用後恢復。另一家電商停用 WooCommerce 後前台跑版，佈景版面本來就吃它的樣式，不是能隨手關的外掛。

## 什麼時候該找人

跑版伴隨看不懂的文字或連結（可能被植入內容）、停用所有外掛仍然壞、多語站只有某些語言壞（翻譯外掛的模板對應），這些要有人看整體結構，不是改一行 CSS 的事。

## 常見問題

### 電腦版出現橫向捲軸、右側多出空白怎麼查？

F12 在 Console 找 scrollWidth 大於 clientWidth 的元素，通常是某個容器寫死寬度或 flex 設成不能縮，改該容器設定即可。

### iPhone 上電話號碼變成藍色、字型不同是什麼問題？

Safari 會自動偵測電話號碼並套連結樣式。加 format-detection meta，或把號碼包成 tel 連結。

### 改了 CSS 前台一直沒變？

多半是快取，尤其 CDN 對 CSS 檔快取很久。清快取外掛、主機快取、CDN 三層，仍不變再查是否改到別的地方。

網站現在跑版中？[網站救援當日受理](https://wptoolbear.com/rescue/)；想有人每月幫你顧著：[網站守護方案](https://wptoolbear.com/guardian/)。