由症狀找出需要修正嘅元件
| 問題 | 先檢查甚麼 | 修正後點驗收 |
|---|---|---|
| 整頁左右走位 | 固定寬度圖片、長網址、表格或不可縮細嘅欄位。 | 正文保持可讀；需要二維呈現嘅表格放在局部可操作捲動區。 |
| 按鈕被遮住 | WhatsApp、Cookie、固定頁尾或聊天視窗。 | 包含鍵盤打開後嘅畫面，確認提交與錯誤訊息仍可見及可操作。 |
| 選單搵唔到路 | 不清楚標籤、hover 限制及收合狀態。 | 用點擊及鍵盤完成開啟、選擇與返回。 |
| 輸入時卡住 | 鍵盤類型、格式限制、標籤及錯誤位置。 | 測試合理格式、漏填、長內容及接收失敗。 |
| 載入時版面跳動 | 圖片未預留空間、延遲內容插入及字型變化。 | 觀察關鍵行動會否移位，再用適當量測工具找原因。 |
用窄畫面檢查重排，唔只看某一款手機
可以把 320 及 390 CSS 像素寬度列入測試，再配合實際裝置、文字放大與不同方向。W3C 嘅重排準則包含 320 CSS 像素寬度嘅垂直內容情境，亦有必須二維呈現內容嘅例外，例如資料表格；唔應簡化成「任何橫向捲動都不合格」。
檢查重點係資訊及功能有冇遺失、正文是否需要反覆左右移動，以及局部捲動區能否操作。單一模擬尺寸正常，唔代表已完成所有裝置或無障礙驗收。
觸控目標同間距要一齊看
W3C WCAG 2.2 嘅最小目標尺寸準則列出 24 × 24 CSS 像素，並包含間距、行內連結等例外。實務上可以按使用情境設計更容易操作嘅主要按鈕；但唔應把某一個建議尺寸寫成所有控制項都適用嘅唯一規則。
除了尺寸，亦要睇鄰近目標、畫面邊緣及固定元件。按鈕夠大但被聊天視窗遮住，仍然完成唔到任務。
表單要連同手機鍵盤驗收
- 標籤在輸入後仍可理解，必填及格式提示放喺合適位置。
- 電話與電郵能方便輸入，格式限制唔會拒絕合理資料。
- 畫面放大或鍵盤打開後，焦點、錯誤與提交行動冇被遮住。
- 送出前、處理中、成功及失敗狀態有明確回饋。
- 成功畫面與接收系統紀錄一致，避免只測到按鈕動畫。
效能分數同實際體驗要分開記錄
工具測試可協助定位載入、互動與版面穩定問題；真實使用者資料則反映特定期間及使用情境。記錄裝置、網絡、測試頁面與版本，唔把一次模擬分數當成所有手機嘅體驗，更唔把較高分數直接寫成查詢增加嘅證明。
手機版交收清單
- 在窄畫面由首頁走到主要服務及查詢入口，記錄任何死路。
- 檢查長標題、圖片、表格、電話與長連結，確認合理換行。
- 打開所有固定元件及選單，測試是否互相遮擋。
- 使用鍵盤與文字放大，確認內容及控制項仍能理解和操作。
- 完整測試表單成功、漏填、錯誤及接收失敗情境。
- 測試電話及 WhatsApp 入口；把點擊與實際聯絡結果分開核對。
- 修正後重測相同任務，保留前後畫面、版本及結果。
常見問題
Responsive 佈景主題係咪等於手機版冇問題？
唔等於。後加內容、外掛、表單及浮動工具都可能造成問題，需要以真實內容同任務驗收。
桌面分數高，手機可唔可以唔測？
手機嘅畫面、輸入方式、裝置能力與網絡情境不同，應分開測試。特別係查詢流程，唔可以只看桌面截圖。
下一步與延伸閱讀
官方參考與更新說明
本文嘅規劃表、測試步驟及示範情境由 ITOB Group 編輯團隊整理；示例並非客戶成效紀錄。最後實質更新：2026 年 10 月 25 日。
