網頁在手機會不會跑版？用 Chrome 裝置模式檢查版面與操作

活動頁在電腦看起來正常，手機上卻可能出現標題擠成一團、按鈕被固定橫幅遮住，或表單欄位超出畫面。發布前不一定能準備所有手機，但可以先用 Chrome 開發者工具的裝置模式，快速改變瀏覽視窗寬度，找出明顯問題。

裝置模式是在電腦上模擬行動裝置的部分體驗，不等於真的在手機執行。本文會先教你檢查版面、記錄問題，再用實機完成重要操作。

準備：選一個有代表性的頁面

先選即將發布的頁面，最好包括頁首、主要圖片、行動呼籲按鈕與表單。若頁面需要登入或尚未公開，請使用自己有權限檢視的預覽頁，並留意預覽與正式頁可能使用不同快取或設定。

在桌面 Chrome 開啟頁面，按右上角選單進入「更多工具」的開發者工具，或在 Windows 按 F12、Ctrl + Shift + I；Mac 可用 Command + Option + I。介面名稱可能隨版本與語言不同。

第一步：開啟裝置工具列並調整寬度

在 DevTools 上方點選手機與平板圖示，開啟 Toggle device toolbar。畫面上方的尺寸選單可選 Responsive（回應式）或預設裝置；回應式模式可拖曳邊界，也能輸入寬高。

先試 320、375 與 425 CSS 像素等寬度，再慢慢拖動寬度，觀察版面何時開始擠壓。這些只是檢查點，不代表所有手機只有這些尺寸。也可切換橫向，檢查較矮的視窗中固定頁首或提示列是否遮住內容。

若畫面縮得太小看不清楚，可調整工具列的縮放比例；縮放顯示不等於改變頁面設定。完成後重新整理頁面，讓需要依視窗條件載入的內容有機會重新呈現。

第二步：從上到下檢查閱讀流程

從頁首開始向下捲動，逐項觀察：

• 導覽與標題： 選單按鈕是否看得到、打開後能否關閉？標題換行後有沒有被截掉或壓到圖片？
• 文字與圖片： 段落是否可讀？圖片是否超出容器、遮住內容，或裁掉必要文字？
• 橫向捲動： 在主要內容區嘗試左右移動。表格或程式碼區塊有時需要局部橫向捲動，但整頁意外溢出會影響閱讀。
• 固定元件： 捲到頁尾時，聊天按鈕、Cookie 提示或固定選單是否遮住主要按鈕？
• 表單： 欄位名稱、錯誤提示及送出按鈕是否可見？下拉選單能否操作？

對問題不要只記「手機版壞掉」。寫下網址、視窗寬度、重現步驟和實際結果，例如「375px，捲到報名區，固定客服按鈕遮住送出鍵右側」。需要交給設計或開發人員時，可從裝置工具列選單擷取畫面；避免將個資或登入資訊放進截圖。

第三步：試走重要操作，但避免誤送正式資料

點開選單與內部連結，確認目標正確；在測試環境使用測試資料填表，檢查必填欄位提示。若只有正式環境，先確認表單是否會寄信、建立訂單或觸發付款，再選擇安全的測試方式；不要隨意送出正式訂單。

檢查鍵盤操作也有幫助：用 Tab 移動焦點，確認焦點位置可見、主要控制項能到達。這只能找出部分問題，不能作為完整無障礙檢測的結論。

第四步：用真手機再確認

Chrome 官方將裝置模式定位為近似模擬。電腦的處理器、瀏覽器、觸控、螢幕鍵盤和行動網路，可能與真實手機不同。至少在可取得的手機上開啟頁面，實際捲動、觸碰按鈕、開啟選單及檢查表單；有條件時再涵蓋不同瀏覽器與作業系統。

修正後，在同一寬度重做原步驟，並檢查相鄰寬度是否出現新問題。最後再走一次實機主要流程，記錄測試設備與結果。只在模擬器看到正常，不能保證所有手機均正常。

常見問題

選了某款手機就等同測過該手機嗎？ 不是。預設項目主要幫助模擬尺寸等條件，仍需實機確認。

看到水平捲動就是錯誤嗎？ 不一定。寬表格可能刻意在局部區塊捲動；應確認使用者能辨識並操作，且整頁不會意外溢出。

為什麼預覽正常、正式頁不同？ 可能有快取、載入資源或權限差異。先記錄兩者網址與條件，再檢查實際正式頁，不要只依預覽判斷。

參考資料：Chrome DevTools 裝置模式、開啟 Chrome DevTools。

延伸閱讀：pagespeed insights first fix