換一個主題之前，很多人只看截圖好不好看、字型順不順眼，卻忘了確認同一套設計在手機螢幕上是否能正常呈現。等主題上線後才發現行動版選單跑版、圖片溢出、字級縮水，才是真正耗時費力的麻煩。

WordPress 響應式設計（responsive design）的核心邏輯，是讓同一套 HTML 結構在不同螢幕寬度下自動調整排版，靠的是 CSS 媒體查詢（Media Query）設定斷點（breakpoint）。斷點決定了版面從幾欄縮成單欄、側欄要不要收起、導覽列要不要折成漢堡選單。主題品質的高低，很大程度反映在斷點設定是否合理、過渡是否順暢。

斷點的概念與常見設定範圍

斷點是 CSS 規則裡設定的寬度門檻，一旦瀏覽器視窗縮到這個寬度以下，對應的樣式就會接管版面。不同主題對斷點的命名各有差異，但普遍都會涵蓋以下幾個關鍵寬度範圍。

這些數字並非鐵律，各主題可能自行微調。驗證時不是只測「768px 以下是否正常」，而是要把滑桿從大往小慢慢拖，觀察斷點切換的瞬間有沒有元素重疊、跳動或消失。

用瀏覽器開發者工具模擬各種裝置

瀏覽器內建的開發者工具（DevTools）是驗證響應式設計最快的第一關。以 Chrome 為例，按下 F12 或 Ctrl+Shift+I（macOS 為 Command+Option+I）開啟後，點選工具列左側的裝置模擬圖示（兩個交疊的矩形），頁面會立即切換到行動版模擬模式。

選取裝置與自訂寬度

模擬器上方的下拉選單提供 iPhone、Pixel 等常見機型，選取後視窗會縮放到對應解析度，同時自動帶入相應的使用者代理（User Agent）字串，讓網站辨識為真實行動裝置造訪。更有用的方式是選「響應式（Responsive）」，手動拖動邊緣調整寬度。這樣可以從 1400px 一路慢慢縮到 320px，逐一確認每個斷點切換時的版面反應。

重點觀察項目

驗證時要系統性掃查以下幾個環節，而不是憑感覺「看起來還好」就帶過。

• 導覽列：選單文字是否完整顯示，折疊後的漢堡圖示能否正常展開，子選單層疊是否干擾點擊範圍
• 圖片寬度：特色圖片、嵌入圖片有無橫向溢出，是否正確套用 max-width: 100% 或主題自訂的尺寸限制
• 字級與行距：手機版標題是否因字號過大壓縮閱讀空間，內文行距有無因容器縮窄顯得過緊
• 按鈕與連結：可點擊區域是否具備足夠的觸控高度（建議 44px 以上），相鄰按鈕間距是否足以避免誤觸
• 頁尾欄位：多欄頁尾在小螢幕是否依序堆疊，有無欄位相互重疊

主題自訂面板的行動版預覽

若使用 WordPress 內建外觀主題自訂器（Customizer），右下角有裝置切換按鈕，可在桌機、平板、手機三種模式間切換預覽。這個功能適合快速確認設定調整後的整體感，但解析度是固定值，無法像 DevTools 那樣拖動測試任意寬度，兩者搭配使用才完整。

用 Google 行動裝置相容性測試工具驗證

瀏覽器模擬畢竟是本機渲染，搜尋引擎爬蟲看到的版本不一定相同。Google 提供的行動裝置相容性測試（Mobile-Friendly Test），是讓 Googlebot 的抓取引擎直接渲染頁面後判斷是否符合行動版標準，測試結果更接近 Google 實際評分的依據。

進入測試工具後，輸入網頁完整 URL，等待約 20 至 60 秒，工具會回傳截圖及診斷結果。若顯示「網頁可在行動裝置上瀏覽」則基本通過；若出現「頁面在行動裝置上不易使用」，則會列出具體問題，常見的包括以下幾項。

• 文字太小，難以閱讀：通常代表主題在行動版未放大基礎字級，或 viewport 中繼標籤（meta tag）設定有誤
• 可點擊元素過於密集：按鈕或連結的間距不足，Googlebot 認為使用者無法精準點擊
• 內容超出螢幕寬度：元素使用了固定像素寬度（如 width: 800px），在小螢幕上會產生橫向捲軸

這些診斷訊息的價值，在於指出主題在 CSS 層面的根本問題，而不只是外觀的「看起來還行」。若正式上線前未加以處理，即使文章內容品質再高，搜尋排名也可能因行動版體驗分數偏低而受到影響。

實際測試建議的頁面類型

主題的響應式表現不是在首頁測一遍就算完成。不同頁面模板的結構差異明顯，各自可能出現不同的版面問題。

• 首頁：輪播橫幅、精選區塊、首頁網格是否在行動版維持可辨識的布局
• 單篇文章：內文寬度、圖片對齊、引用區塊（blockquote）的視覺樣式
• 分類頁／彙整頁：多欄卡片在螢幕縮小時的欄數切換是否順暢
• WooCommerce 商品頁（如有）：商品圖片輪播、加入購物車按鈕、商品描述折疊是否正常
• 聯絡表單頁：欄位寬度、送出按鈕在行動版是否佔滿可用寬度

測試完畢後，記錄哪些頁面模板通過、哪些出現問題。往後主題更新或切換子主題版本時，便有對照基準可依循，不必每次從頭憑印象判斷。