西布倫集運是我們自家經營的美國集運品牌，會員系統是桌機時代用 Grails 和 jqWidgets 寫的。10 月 6 日到 8 日，我們分三批把前台會員中心和後台改成手機可用。
改完之後，10 月 9 日我們用 390 像素寬，把前台十頁、後台八頁逐頁量了一次。整頁橫向捲動一頁都沒有，但還量到 16 條局部問題：前台 12 條、後台 4 條。這篇講我們怎麼量、量到什麼、怎麼改。16 條的修正在 10 月 9 日當天下午全部上線。
舊系統改手機版，先補哪幾個大洞？
10 月 6 日到 8 日那三批，先處理的是會讓人用不下去的地方：
- 彈出視窗寫死 950 到 1,200 像素寬，手機上關閉鈕跑到畫面外。改成固定在畫面內、可以捲動
- 輸入框字級小於 16 像素，iPhone 一點下去整頁放大。全站輸入框改成 16 像素
- 左側九項選單擋在內容前面。改成頂部可以橫滑的分頁列
- 六欄的加值服務表改成卡片，按鈕最小 36 像素高
後台另外做了一整套手機版型：總覽四張快速作業卡、入庫作業的掃描框與相機掃描、包裹與運單的狀態篩選。
大洞補完，接下來的問題就不是「能不能用」，而是「好不好用」。這一層，用眼睛看容易漏。
怎麼量，才不會漏掉？
我們在同網域的頁面裡放一個 390×780 的 iframe，每一頁跑同一段腳本，量五件事：
| 量什麼 | 抓的是哪種問題 |
|---|---|
| 整頁有沒有橫向捲動 | 版面撐破 |
| 哪些元素超出 390 像素 | 寫死寬度的表格與區塊 |
| 每個輸入框的寬、高、字級 | 框太小、iPhone 會放大 |
| 每個按鈕和連結的點擊區 | 手指按不準 |
| 短標籤被折成幾行 | 斷句 |
範圍是前台十頁、後台八頁，再加上公開頁的 24 條連結，逐一讀連結目標。量完再截圖對照，數字和畫面一起看。
量到哪三類問題？
第一類：斷句。 會員中心首頁的美國收貨地址區，「First Name :」的冒號前有一個空白，標籤欄只有 90 像素，冒號自己換到第二行。發票設定頁的「手機條碼載具：」被擠成 7 行，密碼修改頁的「舊密碼：」斷成「舊密／碼：」。
原因都一樣：這幾頁的表格沒有套到手機直排的規則，標籤欄還是桌機的固定寬度。
第二類：輸入框。 基本資料頁的英文姓名兩格並排，各 200 像素，提示文字被截成「請輸入您的英文 Last Nam」。手機和市話那一列，國碼框 40 像素、號碼框 153 像素、高只有 24 像素，市話的範例還寫成手機號碼的格式。建立新包裹的日期欄字級 13 像素，漏掉了 16 像素的規則，因為它是日期元件，輸入框包在另一層裡面。
第三類：點擊區。 頁尾 12 條連結高 14 像素，行距又緊；頂部主選單 29 像素；我的包裹頁的放大鏡按鈕和分頁頁碼框 22 像素。
後台的 4 條是輸入框和點擊區，例如收費管理頁的寄件人欄 200×24 像素、字級 13 像素，會員管理的關鍵字欄 15 像素。
這些問題怎麼改？
修法都在 CSS、頁面樣板和前端程式，資料庫沒有動：
| 問題 | 改法 |
|---|---|
| 標籤斷句 | 把漏掉的表格加進手機直排規則：標籤在上、值在下、輸入框全寬；冒號前的空白拿掉 |
| 英文姓名並排 | 兩格各占一列 |
| 電話列太擠 | 標籤在上，國碼和號碼同一列，高度 32 像素、字級 16 像素；市話範例改成市話格式 |
| 日期欄 13 像素 | 日期元件內層的輸入框補進 16 像素規則 |
| 點擊區太小 | 頁尾連結加上下間距，主選單、按鈕、分頁都改到 36 像素以上 |
16 條在 10 月 9 日下午全部上線：後台 15:02、前台 15:10。
公開頁（首頁、登入、註冊、忘記密碼）上線後，用另一台電腦的瀏覽器在 390 像素寬複驗過：沒有整頁左右滑、輸入框 16 像素、頁尾連結和主選單的點擊區 41 像素、FB 粉絲專頁的連結已修好。
登入後的頁面（美國地址、發票設定、基本資料、建立新包裹、運單列表等）也已上線，正式站登入後的複驗排在下一步。
走查時還抓到一個程式問題：包裹沒有長寬高時，開運單頁會直接出錯。正式站查過，這種包裹是 0 筆，我們還是加上了程式防呆。
連結檢查抓到什麼？
公開頁的 24 條連結都有目標，沒有壞連結。只抓到一條：頁尾「FB 粉絲專頁」的網址，路徑重複了一次（/usshiptw/usshiptw）。這條在 10 月 9 日已經修好。
這種錯，桌機上一樣存在，只是平常沒人點。逐條讀連結目標，才會發現。
舊系統做手機版，有哪三個心得？
- 先量再改。 量測腳本寫好之後，每改一批就跑一次，比每次用眼睛看快，也不會漏
- 全站訂兩條下限。 我們訂的是輸入框字級 16 像素以上、點擊區 36 像素以上。全站一次設好，比逐頁補省事，這次漏掉的幾個欄位，都是沒吃到全站規則的特例。36 像素是我們自己的下限，不是官方標準：WCAG 2.2 的 AA 級要求點擊目標至少 24×24 CSS 像素、AAA 級是 44×44；Apple 建議按鈕的點擊區至少 44×44 pt，Google 建議觸控目標至少 48×48 dp。要更好按，就往 44 以上做
- 表格在手機上只有兩條路。 欄名在上、值在下的直排，或每一列做成一張卡。橫向捲動只留給真正的資料表，而且第一欄要放最常看的欄位
想請人幫你檢查舊系統的手機版，可以到聯絡頁留言。
常見問題
舊系統要整個重寫，才能做手機版嗎？
不用。西布倫這次量到的 16 條問題，修法都在 CSS、頁面樣板和前端程式，資料庫沒有動。我們的做法是先用螢幕寬度 768 像素以下的樣式蓋掉桌機版，大洞補完再處理局部。
怎麼知道手機版改好了？
用真的瀏覽器在 390 像素寬逐頁看，再加上程式量測。改完再用另一台電腦的瀏覽器驗一次。只看畫面會漏掉字級和點擊區，只看數字會漏掉版面怪不怪，兩個都要。
輸入框在手機上要多大？
我們訂的下限是字級 16 像素、高度 32 像素以上，並且盡量全寬。字級小於 16 像素時，iPhone 點進輸入框會把整頁放大，這是我們改造前遇到的問題之一。這個 16 像素的門檻，我們沒有找到 Apple 或 WebKit 的官方文件寫明，是依實際情況訂的。另外，不要為了擋放大就在 viewport 設定裡關掉縮放：Google 的 web.dev 寫明，這些屬性「可能會導致使用者無法縮放檢視區塊，進而造成無障礙問題」。
按鈕和連結在手機上要多大？
官方數字不只一個。WCAG 2.2 的 AA 級要求點擊目標至少 24×24 CSS 像素，AAA 級是 44×44；Apple 建議按鈕的點擊區至少 44×44 pt；Google 建議觸控目標至少 48×48 dp。我們這次訂的下限是 36 像素；改完之後，公開頁的頁尾連結和主選單點擊區是 41 像素。
參考來源
- W3C，WCAG 2.2（2024-12-12 推薦標準）：2.5.8 Target Size (Minimum)、2.5.5 Target Size (Enhanced)
- Apple Human Interface Guidelines：Buttons
- Google 無障礙說明：觸控目標大小
- web.dev，2019-02-12 更新：回應式網頁設計基本概念
以上官方文件皆於 2026 年 10 月 9 日查詢。
（本文描述的是本社自家經營的西布倫集運會員系統，數字為 2026 年 10 月 9 日走查結果。）
最後更新：