手機版破版與常見問題排查

手機版問題的特性：沒人回報

電腦版壞了，同事會說。手機版壞了，訪客通常只是默默離開——你不會收到任何回報，只會看到轉換率莫名其妙地低。

這篇整理最常見的幾種手機版問題、成因與排查方式。

一、頁面可以左右滑動

最常見也最明顯的破版。正常的手機版只該上下捲動，如果可以左右滑、右側出現空白，代表有元素超出了螢幕寬度。

常見成因

• 圖片沒有設定最大寬度——原圖比螢幕寬
• 表格太寬——欄位多的表格沒有做捲動處理
• 很長的英文或網址沒有斷行——一長串不含空格的文字會撐開版面
• 寫死的固定寬度——某個區塊指定了大於螢幕的寬度
• 嵌入的外部內容——地圖、影片、第三方元件有自己的預設寬度

怎麼找出兇手

從頁面頂端往下捲，一段一段看哪一區出現多餘的空白，通常問題就在那一段。找到後把該區塊的內容逐項移除測試，可以定位到具體元素。

二、字太小或按鈕點不到

多半是電腦版樣式直接沿用到手機造成的。手機的字級與間距需要單獨設定，不是等比例縮小。

檢查方式：把手機拿到正常閱讀距離（不要湊到眼前），看內文是否需要瞇眼。按鈕則用實際的手指點，不要用指甲。

三、固定元素遮住內容

頂部選單列、底部行動按鈕、右下角客服圖示，都可能蓋住內容。

最常出問題的兩個地方：

• 頁面最底部——最後一段內容或頁尾被固定按鈕蓋住
• 表單的送出按鈕——正好被底部固定列擋住，使用者按不到

另外，手機鍵盤跳出時會壓縮可視範圍，原本正常的版面可能突然變得擁擠。填表時要實際測試這個情況。

四、只在 iPhone 上有問題

iPhone 的 Safari 使用與其他瀏覽器不同的核心，在部分行為上有自己的表現方式。這是最需要實機測試的環境，電腦模擬不一定測得出來。

常見的差異出現在：

• 整頁高度的計算方式——與網址列的顯示隱藏有關，可能造成版面高度跳動
• 固定元素在捲動時的行為
• 表單元件的預設外觀
• 影片的自動播放限制
• 輸入框在聚焦時可能觸發頁面自動放大

處理原則：設計階段就避免依賴這些邊界行為，並在驗收時務必用實機測過。

五、手機上特別慢

手機的網路條件與運算能力都不如電腦，同一個網站在手機上通常慢得多。而使用者對慢的容忍度很低。

最常見的原因：圖片

這是最大宗。直接把手機拍的原圖上傳，一張就好幾 MB，一頁放十張就是幾十 MB。

處理方式：

• 上傳時自動壓縮與縮圖——好的後台應該做到這件事，避免問題發生在源頭
• 依螢幕提供不同尺寸——手機不需要載入電腦版的大圖
• 使用較新的圖片格式——同樣畫質下檔案更小
• 延遲載入——畫面外的圖片先不載入

其他常見原因

• 載入了過多的外掛與追蹤碼
• 字型檔案過多過大——中文字型尤其肥大
• 首頁塞了大量輪播圖，每一張都要載入
• 影片檔案沒有壓縮

六、電腦版正常，平板卡在中間很奇怪

容易被漏測的區間。成因通常是斷點設定的區間之間有空隙，或某個寬度下版面邏輯還沒切換。

檢查方式：在電腦上把瀏覽器視窗從最寬慢慢縮到最窄，全程觀察，不要只看幾個定點。

排查的順序

1. 確認範圍——所有手機都有問題，還是只有某一款？只有 iPhone 通常是瀏覽器特性問題
2. 確認頁面——全站都有，還是只有特定頁面？只有某頁多半是該頁的內容造成的
3. 確認是否與內容有關——例如某一則新聞貼了很寬的表格，把該頁撐開了
4. 清除快取再測——排除看到舊版樣式的可能
5. 換一支手機測——排除單一裝置的設定問題

回報問題時該提供的資訊

清楚的描述可以大幅加快處理速度：

• 哪一頁（附網址）
• 什麼手機、什麼瀏覽器
• 做了什麼操作
• 預期結果與實際結果
• 截圖——手機截圖最直接

「手機看起來怪怪的」需要來回確認很多次才知道問題在哪。

預防勝於排查

• 設計階段就確認手機版設計稿，見斷點與設計稿檢查
• 驗收時用實機測試，並把測試範圍寫進驗收文件
• 上線後每季用手機開一次，走過主要頁面與表單
• 後台上傳圖片時自動壓縮，從源頭避免速度問題