手機導覽選單破版怎麼查？scrollWidth 與 focus-visible 前端巡檢

手機版導覽選單破版，常常不是一眼看見的大崩壞，而是很小的邊界問題：某個分類 pill 多了幾個字、CTA 被擠到第二行、Logo 與按鈕中間沒有彈性空間、文章卡片裡的長英文 tag 撐出螢幕。這些問題如果只用桌機寬度看，很容易被漏掉。

我會把手機導覽巡檢當成 route 上線後的前端維護項目，不是等使用者截圖抱怨才修。尤其內容站每天新增文章、分類與標籤，首頁 Hero、Blog 列表、分類頁和文章頁都可能因為新內容而出現不同換行。

先判斷：是真的水平溢出，還是可捲動區塊？

第一個檢查點是頁面層級有沒有水平溢出：

window.innerWidth
document.documentElement.clientWidth
document.documentElement.scrollWidth

如果 document.documentElement.scrollWidth 大於 clientWidth，代表頁面本身被某個元素撐寬。這和 code block 內部可以橫向捲動不同；code block 的水平捲動通常是預期行為，但整個頁面多出橫向捲軸就會讓閱讀體驗變差。

我會先在 390px 左右的 viewport 檢查：

[...document.querySelectorAll('body *')]
  .map((el) => ({ el, rect: el.getBoundingClientRect() }))
  .filter(({ rect }) => rect.right > document.documentElement.clientWidth + 1)
  .slice(0, 10)

這段不是要直接貼到正式網站，而是用來找出誰超出螢幕。找到後再回到 CSS 裡做最小修正，例如加上 min-width: 0、flex-wrap: wrap、max-width: 100%，而不是盲目把整個版面縮小。

Header 與 CTA 列表最常需要彈性空間

手機 Header 常見問題是：Logo、站名、導覽連結、CTA 全部想塞在同一行。內容站如果分類名稱有中英文混用，某一天新增「網站經營」或「自動化工作流」後，就可能把原本剛好可用的寬度撐爆。

我會檢查：

Header 裡的 flex child 是否有 min-width: 0。
導覽列是否允許換行或在小螢幕改成第二列。
CTA 文字是否可以自然換行，還是被 white-space: nowrap 鎖死。
pill / chip 是否有 max-width: 100%，避免長 tag 撐出畫面。

如果 CTA 是主要轉換按鈕，不一定要縮字體；很多時候讓次要連結降低視覺重量、讓主 CTA 保持足夠 touch target，會比把所有東西塞進同一行更穩。

focus-visible 不能只靠 hover 代替

手機巡檢也要順手檢查鍵盤與外接輸入裝置。很多導覽問題不是看起來破版，而是使用 Tab 鍵時焦點不明顯，或 focus ring 被父層 overflow 裁掉。

我會用這個順序看互動狀態：

用 Tab 走過 Header、Hero CTA、分類連結、文章卡片 CTA。
確認目前焦點有清楚的 outline 或陰影，不只依賴 hover 顏色。
確認 focus ring 沒有被 overflow: hidden 裁掉。
確認連結文字本身可以說明目的，不只是「更多」或「點我」。

CSS 可以保留品牌色，但要讓焦點狀態足夠明顯：

:focus-visible {
  outline: 3px solid rgba(255, 148, 70, 0.7);
  outline-offset: 3px;
}

如果元件有深色背景或橘色主按鈕，焦點色也要實際看對比，必要時用白色內框加品牌色外框，不要只套同一個陰影。

文章內容也會影響導覽品質

內容站的手機版問題常常由新文章帶入：

標題太長，最新文章卡片高度突然變得不均。
tag 裡有長英文或工具名稱，chip 不換行。
markdown 表格或 code block 沒有內層捲動。
裸露 URL 沒有斷行，直接撐寬文章頁。

所以每天新增文章後，我不只看 build 是否成功，也會看新文章是否真的出現在 /blog，首頁 Latest / Hero 是否仍然像品牌網站，而不是變成臨時測試頁。

我會保留的最小修正原則

前端巡檢最怕看到小問題就大改版。UCAMC 這類長期經營的內容站，我會優先做小而可回溯的修正：

先找出溢出的具體元素，再改該區塊。
先補 min-width: 0、max-width: 100%、overflow-wrap: anywhere，再考慮調整整體字級。
只讓真正需要單行的 UI 使用 white-space: nowrap。
保留主要 CTA 的視覺層級，不把所有按鈕都改成同一個強度。
對新文章頁面做一次手機寬度檢查，避免內容本身破壞版面。

這樣做的好處是，網站每天都有新內容時，版面仍然可以慢慢被整理得更穩，而不是每次遇到一個長標題就重寫整個首頁。

上線前的簡短巡檢清單

我會把手機導覽與互動狀態放進 route health check 裡一起看：

/ 首頁：Hero CTA、最新文章卡片、分類入口沒有水平溢出。
/blog：第一張文章卡片 title、excerpt、分類與 CTA 可讀。
/{slug}：新文章圖片、標題、code block 與內部連結正常。
/category/{category}：分類頁卡片在手機寬度下不撐版。
robots.txt 與 sitemap.xml：仍可正常回應並包含新文章。
legacy ID-prefixed URL：舊網址模式仍 301 到 root-level canonical。

前端維護不是只追求「看起來差不多」，而是讓每次新增文章、調整分類、更新 CTA 後，讀者在桌機與手機都能穩定閱讀、點擊與返回。這些小檢查累積起來，就是內容網站長期可信任的基礎。