2023 年 5 月，我寫了三個線上心理測驗，塞在同一個 Django 專案裡跑在 Heroku 上。2026 年 7 月，我把它們全部重寫了一次——同一份題目、同一個作者，中間隔了三年。真正讓我動手的不是技術，是我終於看懂了一句三年前就有人跟我說過的話。

那句被我降級的回饋

客戶轉述給我：「學員說手機上不好填。」

我當時的判斷很快：能填、填得完、會跑出結果、沒有任何錯誤訊息。所以它不是 bug，是體驗問題；不是必須，是有空再說。然後它就擱了三年。

這個判斷有個我當下完全沒意識到的前提：我是在桌機上驗收的。滑鼠點得到，我就看不到問題。

我設計的時候，腦袋裡的畫面是「一個人坐在電腦前慢慢填一份問卷」。實際發生的畫面完全是另一回事。而我從來沒問過。

三年後，我打開自己的舊 code

重寫之前我先讀了一遍 2023 年的版本。那句「手機上不好填」不是抽象的抱怨——它在程式碼裡留下了三個很具體的痕跡。

痕跡一：一頁到底

最長的一份 48 題；三份加起來 240 個 radio，每一份都塞在同一個 <form> 裡。桌機上這叫「一目瞭然」，手機上這叫「捲三十秒還在第 11 題」。

痕跡二：24 個標籤，全部指向第一題

每一題的四個選項，我都是這樣寫的：

<!-- 第 1 題 -->
<input type="radio" name="question1" id="inlineRadio1" value="4">
<label for="inlineRadio1">1</label>

<!-- 第 2 題……id 一模一樣 -->
<input type="radio" name="question2" id="inlineRadio1" value="1">
<label for="inlineRadio1">1</label>

id="inlineRadio1" 在同一份文件裡出現了 24 次。HTML 的 id 必須唯一，重複時 for 只會綁到文件裡第一個符合的元素——也就是說，第 5 題那個寫著「1」的文字標籤，點下去選到的是第 1 題。

這裡有個很殘忍的細節：用滑鼠的人不會遇到。滑鼠會精準點在那個小圓圈上，圓圈本身是正常的。只有用手指、習慣點文字比較好按的人，才會踩到。而且它不會報錯、不會有紅字——你只是安靜地答錯了一題，然後拿到一份安靜地算錯的分數。

痕跡三：唯一一段為手機寫的 CSS

整個 2023 版本裡，只有一段 media query 是為小螢幕寫的。它是這樣寫的：

@media only screen and (max-width:990px){
  input[type="radio"] {
    transform: scale(0.5); /* 調整此值以縮小元件大小 */
  }
}

Bootstrap 的 radio 預設大約 16px，縮成 0.5 倍之後大約 8px。而觸控目標的建議尺寸是 44px。

我看到這段的時候愣了一下，因為我完全記得當時在想什麼：手機上排版太擠了，那就把東西縮小。在桌機的思維裡，這是一個完全合理的反應——畫面不夠用就縮，縮完就排得下了。

問題是手機上「排得下」跟「點得到」是兩件事。我把版面問題解決了，代價是把使用者要碰的東西縮到剩下一半。

2026 版：每個決定都指向同一個場景

重寫的時候我沒有拿著「要用 Next.js」的清單，我拿的是那個我三年前沒有的畫面：課堂上、一群人、手機、隨時會被打斷。從那個畫面往回推，該做什麼其實很好決定。

1. 一次只出一題。不用捲、不會漏、不用在 24 題裡找自己跳過了哪一格。
2. 選完自動跳下一題（延遲 220ms，讓人看得到自己剛剛選了什麼再走）。課堂上每一次多餘的點擊都會被乘以三十個人。
3. 進度條 + 「第 5 / 24 題」。講師問「還要多久」的時候，答案要在螢幕上。
4. 作答存在瀏覽器裡，中途離開可以續填。被打斷是課堂的常態，不是意外。
5. 整頁不捲動，版面自己縮到剛好。下一段細講——這是整件事最有意思的地方。

// 每次作答變動就存回 localStorage，進頁時還原
localStorage.setItem(storageKey, JSON.stringify({ answers, index }));

存的是答案加上目前題號，所以回來的時候不只答案還在，連停在第幾題都一樣。讀寫都包在 try/catch 裡——無痕模式或擋了 storage 的瀏覽器會直接丟例外，那種情況下測驗要能照常做完，只是不會被記住而已。

兩次「縮小」，差別在縮的是誰

2026 版為了「整頁不捲動」，做了一個叫 AutoFit 的元件：量一次可用空間、量一次內容的自然尺寸，算出倍率把內容縮到剛好塞得下。

// 只縮不放大（最大 1），取高／寬兩者較嚴格的比例
const s = Math.min(1, availH / needH, availW / needW);
inner.style.transform = `scale(${s})`;

看到這裡你可能會覺得：等等，這不是跟 2023 年那個 scale(0.5) 一樣嗎？

形式上一模一樣，效果剛好相反，而差別只有一個：縮的是誰。

2026 版的選項不是 radio 圓圈，是一個 width: 100% 的按鈕，內距上下各 11–15px、字級 16–18px——整條都能點，實際高度落在 44px 以上。就算 AutoFit 把整塊縮到 0.8 倍，它還是比 2023 年那個 8px 的圓圈大得多。

縮版面是為了讓內容不用捲；縮控制項是為了讓內容排得下。前者服務的是使用情境，後者服務的是我的排版焦慮。

眉角

• 我沒有回頭修 2023 版，是整個重寫。因為要換掉的不是幾個 bug，是「一頁列完」這個版面前提——那個前提一改，剩下的程式碼幾乎沒有東西留得下來。
• 三個測驗從一個 Django 專案拆成三個獨立的站。這是另一個獨立的決定（各自發版、各自掛廣告、壞一個不會拖累另外兩個），跟手機沒關係，不要混在一起講。
• 沒有做的：帳號與後端作答紀錄。課堂當場填完就看結果，加一道註冊只會讓更多人卡在門口。localStorage 已經解掉「被打斷」這個真實問題了。
• 那個 id 重複的 bug 活了三年，沒有任何人回報過。因為它的症狀是「分數怪怪的」，不是「壞掉」——而分數本來就沒有人能驗證。