手機瀏覽器與電腦瀏覽器的差別
差別不只是螢幕比較小
手機瀏覽器與電腦瀏覽器在操作方式、可用空間、系統行為上都不同。理解這些差異，才知道測試時該注意什麼。
一、觸控與滑鼠的根本差異
| 滑鼠 | 觸控 | |
|---|---|---|
| 精確度 | 高 | 較低，手指有寬度 |
| 滑過的效果 | 有 | 沒有 |
| 右鍵選單 | 有 | 長按取代 |
| 捲動 | 滾輪 | 手指滑動 |
最重要的一項：沒有「滑過」
電腦上把滑鼠移到選單上就會展開子選單，手機上沒有這個動作。
如果設計時依賴滑過的效果，手機使用者可能：
- 點一下才展開，再點一下才進入——多了一步
- 或是直接跳走，根本看不到子選單
測試時務必實際在手機上操作選單，這是常見的問題來源。
點擊區域要夠大
手指的接觸面積比滑鼠游標大得多。太小或太密集的按鈕在手機上很難按準。
常見問題：連結之間間距太近、關閉按鈕太小、表格中的操作按鈕擠在一起。
二、可用高度會變動
這是手機特有的問題。
手機瀏覽器的網址列會隨著捲動自動收起或展開，這代表可見區域的高度是變動的。
造成的問題
- 設計成「剛好滿一屏」的區塊，可能被切掉一部分
- 固定在畫面底部的元素，可能被瀏覽器介面遮住
- 捲動時版面出現輕微跳動
不要假設可見高度是固定的。 重要內容不要卡在畫面邊緣。
三、鍵盤彈出會擠壓版面
點擊輸入欄位時，虛擬鍵盤會佔掉螢幕的一大部分。
常見的問題
- 送出按鈕被鍵盤遮住——使用者找不到怎麼送出
- 正在輸入的欄位被推到看不見的位置
- 固定在底部的元素浮到鍵盤上方，擋住內容
測試表單時一定要實際在手機上填一次，確認每個欄位在鍵盤彈出時都還看得到。
表單設計的原則見手機版表單怎麼設計才不會流失客戶。
四、輸入欄位的類型會影響鍵盤
如果欄位有正確標示類型，手機會自動叫出對應的鍵盤：
- 電話欄位——直接顯示數字鍵盤
- Email 欄位——鍵盤上會有 @ 符號
- 網址欄位——會有 .com 之類的捷徑
這是成本極低但體驗差異明顯的細節，驗收時可以確認。
五、自動縮放與字級
某些情況下，點擊輸入欄位時畫面會自動放大——這通常是因為欄位的字級設定太小。
放大之後畫面就跑掉了，使用者要自己縮回來，體驗很差。
另外，使用者可能在系統設定中調整了字級偏好。版面應該能容納較大的字，不會因此破版。
相關說明見無障礙網站的實作檢查清單。
六、應用程式內建的瀏覽器
從通訊軟體或社群平台點連結時，開啟的通常是該應用程式內建的簡易瀏覽器，而不是你設為預設的那個。
可能的限制
- 部分功能不支援——某些登入方式、檔案下載
- 畫面上下方被應用程式的介面佔用
- 快取行為不同
- 無法使用你在正常瀏覽器裝的擴充功能
務必實測的情境
如果你的客戶常透過通訊軟體收到連結，這個情境比某些冷門瀏覽器更重要。
測試方式：把網址傳給自己，從通訊軟體點進去操作一次。
七、桌面版網站選項
手機瀏覽器通常有「切換為桌面版網站」的選項。使用者切換後，會看到未經手機調整的版面。
這通常不需要特別處理，但如果客戶反映「手機上看起來很小、要一直放大」，可以先確認他是不是誤開了這個選項。
八、網路環境的差異
手機使用者可能在行動網路下瀏覽，速度與穩定性不如辦公室的網路。
這代表：
- 圖片大小的影響更明顯
- 載入太慢時，離開的比例更高
- 不穩定時可能部分資源沒載入完成
測試速度時建議用行動網路實測，不要只用辦公室的網路。
見怎麼測網站速度。
用電腦模擬不能取代實機
電腦的開發者工具可以模擬手機尺寸，這在開發時很方便，但無法取代實機測試。
模擬看不出來的事
- 觸控的實際手感與點擊準確度
- 鍵盤彈出的影響
- 網址列收合造成的高度變化
- 實際的載入速度
- 字體在該裝置上的呈現
- 應用程式內建瀏覽器的行為
驗收時應要求實機測試，並自己也用手機操作一次。
手機測試的檢查清單
- 選單能正常展開與收合
- 所有按鈕都好按，不會誤觸
- 表單每個欄位在鍵盤彈出時都看得到
- 送出按鈕不會被鍵盤遮住
- 電話號碼可以一鍵撥出
- 圖片與表格不會超出畫面
- 文字不用放大就看得清楚
- 從通訊軟體點連結進去也正常
破版問題的排查見手機版破版與常見問題排查。
各瀏覽器的版本、介面與行為持續更新，本文說明的是原則與判斷方式。實際的操作位置可能因版本而略有差異。