04-verifylisted

# 階段四：驗收 ## 先跑機器檢查 ```bash node tools/check.mjs site/index.html ``` 回傳 0 才算過。這支擋的是幾種一定會被抓包的錯： - 模板的示範內容忘了換 - 搜尋引擎與社群分享需要的標籤沒寫 - 會動的東西沒有辦法關掉 - `<img>` 指到不存在的檔案（選了要圖的版面卻沒放圖） - 正體中文的頁面混進簡體字 - 內文與背景、按鈕的字與底色，對比低於 4.5:1 **最後三條是實測出來的。** 用非 Claude 的模型跑這條流程， 它會把「根據」「必須」寫成簡體，使用者看不出來就上線了； 換上自己的品牌色之後按鈕的字看不見，也是常見的翻車方式。 對比是從 `tokens.css` 的變數直接算的，不是從截圖判斷， **所以它抓不到版面問題**：留白不對、字級沒有階層、圖片比例怪， 這些機器看不出來，要靠下面那五件事跟 Lighthouse。 **而且對比過關不等於看得下去。** 實測過一個算出來 5.16:1、 通過 4.5:1 門檻的頁面，受眾審查裡三個模型都說讀不下去， 因為字小、背後有格線、整片深色疊在一起。 那一層在階段五處理，看 `skills/05-optimise/SKILL.md`。 檢查沒過就修到過，不要在報告裡寫「這幾項可以之後再處理」。 ## 然後你自己看這五件事 機器看不出來，但是使用者一定會遇到： 1. **手機開一次。** 拉窄瀏覽器視窗不算，要拿真的手機開。 最常出事的是首屏文字被動效壓住，還有按鈕在拇指構不到的位置。 **另外一定要用程式量一次橫向溢出**，因為它在縮圖上看不出來， 在桌機也不會發作，而使用者一滑就會看到整頁歪掉： ```js // 在 1440 與 390 兩個寬度各跑一次 document.documentElement.scrollWidth - document.documentElement.clientWidth ``` 大於 1 就是有東西超出去了。找兇手用這一段，它會列出右緣跑掉的元素： ```js const lim = document.documentElement.clientWidth; [...document.querySelectorAll('*')] .filter((el) => el.getBoundingClientRect().right > lim + 1) .map((el) => el.tagName + '.' + el.className); ``` **列不出來就是偽元素幹的**，去 CSS 找 `::before` / `::after` 裡面的 負 `inset`、負 `right`、負 `left`。這個 repo 自己的範例就中過三次， 三次都是刻意外擴的裝飾（頁緣直排標籤、文字底下的暗罩、圈起來的紅筆圈）， 在桌機有版心外的空白可以站，到窄螢幕就沒有了。 修法是在窄螢幕把外擴量收掉，或在外層加 `overflow: clip` （**不要用 `hidden`**，那會產生捲動容器把 `position: sticky` 弄壞）。 2. **把網路調到慢速開一次。** 開發者工具裡把網路設成 Slow 4G， 看第一眼出現的是不是白畫面。首屏動效在還沒載完的時候不能讓畫面空著。 3. **關掉動畫再開一次。**