網站改版完成後，桌機正常但手機跑版怎麼辦？

網站改版後桌機看起來正常，手機卻出現橫向捲動、欄位被擠壓、文字超出畫面或元素互相重疊，通常代表頁面中的某個設定只適合較寬的螢幕，沒有隨手機寬度調整。

這時不需要立刻重做整個頁面，也不要只用 overflow: hidden 把超出的內容藏起來。比較有效的做法是先確認哪個頁面、哪個寬度與哪個元素開始異常，再檢查它的尺寸、排列、間距、定位及響應式設定。

先確認是「真的跑版」，還是看到舊版本

開始修改前，先用實際手機打開正式網站，並確認以下幾點：

• 問題是否只出現在某一頁，還是所有頁面都有
• 直向與橫向螢幕是否都會發生
• iPhone、Android 或不同瀏覽器的結果是否相同
• 使用無痕視窗或行動網路後，是否仍看到同樣問題
• Elementor 的手機預覽與正式網站是否一致

如果編輯器內已經正常，手機前台卻仍顯示舊樣式，問題可能不是版面設定，而是頁面快取、瀏覽器快取或舊的 CSS 檔案仍在作用。這類情況可先參考：Elementor 修改後前台沒有更新，可能是哪裡出了問題？

若清除快取後問題仍存在，才進入版面檢查。這樣可以避免為了不存在的排版問題反覆修改頁面。

先看症狀，通常比較快找到原因

手機跑版不是單一問題。畫面表現不同，優先檢查的地方也不同。

手機上的症狀	常見原因	優先檢查
整頁可以左右拖動	元素固定寬度、負邊距、絕對定位或內容超出容器	找出超過畫面寬度的元素
兩欄被擠得很窄	容器沒有換行、子項寬度固定或欄間距過大	Flex 方向、Wrap、子項寬度與 Gap
標題或按鈕超出畫面	字級固定、文字不換行、Padding 過大	手機字級、行高、white-space 與內距
圖片被切掉或超出	固定尺寸、背景圖設定或 object-fit 不適合	圖片寬高、最大寬度與裁切方式
元素消失	被設為手機隱藏、顏色與背景相同或被其他元素蓋住	Responsive 顯示、Z-index 與定位
區塊互相重疊	絕對定位、固定高度、負邊距或桌機間距沿用到手機	Position、Min Height、Margin 與 Padding
手機選單無法使用	Header breakpoint、選單設定、CSS／JavaScript 或快取問題	Theme Builder、主題 Header 與瀏覽器錯誤

先把問題歸類，再處理最可能的原因，比逐一打開所有設定更有效率。

1. 整頁出現橫向捲動：先找出超寬元素

手機畫面右側多出空白，而且整頁可以左右滑動，通常是某個元素寬度超過視窗。

常見來源包括：

• 容器、圖片或表格使用固定像素寬度
• 元素設定 min-width，無法隨畫面縮小
• 左右 Margin 或 Padding 加總後超過 100%
• 負邊距把元素推到容器外
• 絕對定位的元素超出螢幕
• 很長的網址、英文單字或程式碼無法換行
• 自訂 HTML、嵌入表單或第三方工具使用固定寬度

修正時應先找到真正超出的元素，再調整其寬度、最大寬度、換行或定位。將最外層容器直接設為隱藏溢出，雖然可能讓橫向捲軸消失，但也可能把按鈕、陰影、下拉選單或其他應顯示的內容一起切掉。

因此，overflow: hidden 適合用在確認該區塊本來就不應顯示超出內容的情況，不應取代問題定位。

2. 欄位被擠壓或順序不對：檢查容器排列

桌機常使用兩欄或三欄排列，但手機寬度有限，通常需要改成上下排列。

使用 Elementor Container 時，可依手機斷點檢查：

• Direction 是否要由 Row 改為 Column
• Wrap 是否允許子項換行
• 每個子項的寬度是否仍是固定值
• Gap 是否在手機上過大
• 元素順序是否需要調整
• Align Items 與 Justify Content 是否符合直向排列

如果使用自訂 CSS，也要檢查 Flexbox 或 Grid 是否只設定了桌機欄數，卻沒有在較窄寬度調整。例如桌機三欄可以在平板變成兩欄、手機變成一欄，不一定要讓三個欄位一直縮小。

3. 文字、按鈕與間距超出：不要只縮小字體

手機標題放不下時，第一反應通常是縮小字體，但真正原因也可能是容器過窄、左右內距太大、文字被禁止換行，或按鈕設定了固定寬度。

可以依序確認：

1. 手機版字級與行高是否合理。
2. 標題容器的左右 Padding 是否過大。
3. 按鈕文字是否允許換行，或是否需要改為滿版按鈕。
4. 元素是否設定固定高度，導致換行後文字被切掉。
5. 自訂 CSS 是否使用 white-space: nowrap。

桌機上為了視覺節奏加入的大留白，也不一定適合直接沿用到手機。手機版通常需要重新檢查區塊上下間距，而不是按比例把所有數值縮小。

4. 圖片正常但背景圖被裁切：兩者的處理方式不同

一般圖片與區塊背景圖的行為不同。

一般圖片應確認寬度是否能隨容器縮小，常見做法是限制最大寬度不超過容器。WordPress 產生的圖片通常具有響應式圖片標記，但這只協助瀏覽器選擇適合的圖片來源，不代表區塊寬度、裁切方式與周圍版面一定正確。

背景圖則要檢查：

• Background Size 使用 Cover 還是 Contain
• Background Position 在手機是否需要重新指定
• 容器高度是否固定
• 重要主體是否剛好位於手機裁切區之外
• 是否需要為手機使用另一張構圖較合適的圖片

如果圖片中的人物或產品在手機版一直被裁掉，問題不一定能靠改位置完全解決。有時應從原圖構圖或手機專用圖片處理，而不是不斷增加容器高度。

5. 元素消失或重疊：查看顯示條件與定位

Elementor 可以針對桌機、平板與手機隱藏元素。改版或複製區塊後，可能留下原本的裝置顯示設定，導致某個元件只在手機消失。

先檢查元素的 Responsive 顯示選項，再查看是否有以下情況：

• 文字顏色與手機背景相同
• Z-index 較低，被其他區塊蓋住
• 使用 Absolute 或 Fixed 定位，位置仍沿用桌機數值
• 父容器固定高度，內容換行後超出
• 負邊距讓兩個區塊在窄螢幕互相覆蓋

裝飾性圖形使用絕對定位很常見，但主要內容、按鈕與表單若過度依賴絕對定位，通常較難在不同螢幕寬度維持穩定。

6. 只有 Header 或手機選單異常：不要只改頁面內容

如果正文正常，只有 Header、Logo、CTA 或漢堡選單跑版，問題通常位於全站 Header，而不是目前這一頁。

需要確認 Header 是由哪一套功能控制：

• 佈景主題的 Header Builder
• Elementor Theme Builder
• 外掛建立的 Mega Menu
• 自訂 HTML、CSS 或 JavaScript

接著檢查 Header 切換到手機版的 breakpoint、Logo 寬度、按鈕寬度、選單展開方向及固定定位。若同時存在主題 Header 與 Elementor Header，也要確認顯示條件，避免兩套 Header 在特定寬度同時出現。

手機選單能顯示卻無法點擊，則可能不只是 CSS，還要查看是否有透明元素覆蓋、Z-index 不正確、JavaScript 錯誤或最佳化功能合併檔案後產生衝突。

7. Elementor 預覽正常、實際手機不正常：比較的不是同一個環境

Elementor 的 Responsive Mode 很適合調整不同裝置的設定，但它仍是編輯器中的模擬畫面。正式手機還會受到實際瀏覽器寬度、快取、瀏覽器工具列、第三方程式與前台 CSS 的影響。

因此，修正後至少要進行三種確認：

1. Elementor 或瀏覽器的響應式預覽，用來快速切換不同寬度。
2. 桌機瀏覽器手動縮放視窗，觀察在哪個寬度開始異常。
3. 一支以上的實際手機，以無痕視窗測試正式網站。

不要只測「桌機、平板、手機」三個固定按鈕。跑版有時只出現在兩個 breakpoint 之間，例如 820px 正常、但 760px 開始擠壓；找出開始異常的寬度，才能判斷是否需要調整 breakpoint 或元素本身。

實際修正時，建議按照這個順序

手機跑版可能同時有多個原因。依照以下順序處理，比一邊看畫面一邊隨機調整數值更容易追蹤：

1. 確認正式前台與問題範圍： 哪一頁、哪一種手機、哪個寬度開始異常。
2. 排除快取與舊 CSS： 確定看到的是最新版本。
3. 找到第一個超出或重疊的元素： 先處理造成整頁變寬的來源。
4. 調整結構： 先修容器方向、換行、寬度與定位。
5. 調整視覺： 再處理字級、間距、圖片位置與裝飾元素。
6. 檢查全站元件： Header、Footer、Popup、表單與固定按鈕。
7. 清除快取並重新測試： 同時確認其他頁面沒有被共用 CSS 影響。

若網站已經上線，修改共用 Header、全站 CSS 或大量頁面前，應先備份；變更範圍較大時，則可在 Staging 環境測試完成後再更新正式站。

CyberP7N 實際檢查手機版時的重點

CyberP7N 處理手機跑版時，會先從正式前台確認問題，而不是直接進入編輯器修改。因為同一個畫面異常，可能來自 Elementor 設定、自訂 CSS、主題 Header、快取或第三方元件，處理方式並不相同。

實際檢查時會特別注意：

• 頁面是否出現橫向捲動，以及是哪個元素超出
• Container 在不同寬度的排列、Wrap 與子項寬度
• 手機版是否仍沿用桌機的固定高度、負邊距或絕對定位
• 標題、按鈕與導覽列是否在真實文字長度下正常換行
• Header、Footer、表單與固定按鈕是否在內容頁一起測試
• Elementor 預覽、瀏覽器模擬與實際手機的結果是否一致
• 清除 SiteGround Dynamic Cache 後，無痕視窗是否顯示最新版本

手機版不是桌機版縮小後的附屬畫面。重要內容的順序、按鈕大小、間距與操作方式，都應以窄螢幕重新確認。

結語

網站改版後桌機正常、手機跑版，最常見的原因不是整個版型失效，而是某個元素的固定寬度、排列、間距、定位或裝置設定沒有配合手機畫面。

先確認是否為快取，再依症狀找到造成問題的元素；先修結構，最後才調整字級與視覺細節。完成後以多個寬度和實際手機重新測試，才能避免修好一個尺寸，卻在另一個尺寸再次跑版。