替貓老闆做官網 · 第 08 章
手機版要重排，不是縮小
手機版不是縮小的電腦版：多欄折成單欄、導覽收進抽屜、字級和點擊目標按拇指重新計算。這一章把手機悲劇清單一項一項劃掉。
貓老闆的簡報
我的客人九成用手機逛。你只用電腦驗收——你是做給你自己看的嗎。
——貓掌櫃的老闆「掌櫃」下需求時的原話
這章做什麼
產出手機版調整：單欄重排、抽屜選單、字級與 44px 點擊目標，以及「零橫向捲軸」的走查紀錄。
動手做
- 斷點只設一個：960px 以下切單欄。斷點越多，AI 越容易改出縫隙。
- 導覽收進抽屜：全寬清單、開合 0.2 秒過渡、開啟時鎖住背景捲動、Esc 可關閉。
- 字級：內文至少 16px；可點目標至少 44×44px；行高放到 1.7。
- 用真手機開一次：轉向、縮放、送表單、點抽屜。模擬器不算數。
親手試試
商品
四條商品線：吃、玩、住、人用貓周邊。招牌陶燒貓碗在這區。
每月玩具盒
三種方案：單貓／雙貓／多貓家庭，全程含運。
門市
台北中山店與台中中華店，週三公休——貓老闆要補眠。
候補登記
陶碗缺貨時，留下 Email，補貨當天第一時間通知你。
試試：上下捲動（導覽列黏住）；點選單（跳到該段＋高亮）。
這樣對 AI 說
中文就可以
把「貓掌櫃」官網調整成手機優先：960px 以下所有多欄折成單欄，順序不變；導覽改成全寬抽屜選單（漢堡按鈕開合、0.2 秒過渡、開啟時鎖背景捲動、Esc 關閉、aria-expanded 要正確）；內文字級 16px 起，所有可點目標至少 44×44px；最後檢查並消除所有橫向捲軸。改完列出檢查清單與每一項的結果。
驗收清單
在 375px 寬的手機上，所有「大概有做」的地方都會現形。
- 所有多欄在 960px 以下折成單欄，順序不變。
- 導覽收進抽屜：開合、鎖背景捲動、Esc 關閉都正常。
- 內文至少 16px，可點目標至少 44×44px。
- 零橫向捲軸；表格與圖片都不會被切掉。
- 動畫只在狀態變化時出現，0.3 秒內，並尊重 prefers-reduced-motion。
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。
進度只存在這台瀏覽器，不上傳、不追蹤。