題幹與適用場景
一個設計工具需要縮放畫布，但工具列仍要參與版面。請比較 CSS zoom 與 transform: scale() 對版面、溢出、事件座標和無障礙的影響，並說明如何除錯巢狀縮放。
面試官考察點
- 是否區分會觸發版面重算的縮放和只改變繪製的變換。
- 是否能處理捲動容器、點擊座標、焦點、瀏覽器頁面縮放和巢狀 zoom。
- 是否用真實情境驗證，而不是只憑視覺截圖選擇屬性。
回答前需要釐清的問題
- 縮放對象是普通頁面內容、可編輯畫布，還是唯讀預覽？
- 縮放後元素是否必須改變版面空間、捲動範圍和命中區域？
- 需要支援鍵盤、讀屏、瀏覽器頁面縮放和高對比度嗎？
30 秒回答框架
如果縮放應影響版面和捲動空間，我會評估 CSS zoom；如果只需要視覺變換而不希望兄弟元素移動，則考慮 transform: scale()，並自行處理 transform origin、命中和捲動。zoom 會影響版面，scale() 不會觸發版面重算。巢狀 zoom 可用 currentCSSZoom 讀取有效乘積，最後在鍵盤、縮放、捲動和高 DPI 下驗證。
分步驟深入解答
1. 先定義縮放語意
頁面閱讀縮放應優先使用瀏覽器和系統能力，不要用 CSS 屬性取代使用者設定。畫布編輯器則需要一個應用層級比例，明確畫布座標與視口座標的轉換，避免把兩種縮放混成一個狀態。
2. 理解 zoom 的版面效果
CSS zoom 會放大目標元素並影響頁面版面，兄弟元素、尺寸計算和溢出範圍會看到變化。它適合縮放後仍佔據對應版面空間的內容，但必須檢查容器最小寬度和捲軸行為。
3. 理解 transform: scale 的繪製效果
transform: scale() 改變繪製和變換後的視覺邊界，不會讓其他元素重新排版。它適合預覽、裝飾或需要保持外部版面穩定的情境；使用時要明確 transform-origin，並為視覺區域與事件座標建立轉換。
4. 處理程式邊界
.preview-zoom {
zoom: var(--preview-zoom, 1);
}
.canvas-visual {
transform: scale(var(--canvas-scale, 1));
transform-origin: top left;
}同一元件不要無意同時疊加兩種比例。將比例狀態放在畫布控制器附近，工具列和畫布內容分別決定是否繼承，避免全域 zoom 讓導覽和彈窗一起改變。
5. 處理座標、焦點和捲動
縮放後用 getBoundingClientRect()、指標事件座標和捲動偏移推導變換矩陣，並在目標瀏覽器驗證。焦點環、拖曳手柄和鍵盤導覽必須仍然可見；transform 視覺放大不等於容器自動擴大捲動空間。
6. 除錯巢狀縮放
Element.currentCSSZoom 返回元素及祖先 CSS zoom 的有效乘積；它能協助日誌和除錯工具解釋「看起來放大了幾次」。不要把它當作瀏覽器頁面縮放或 transform 比例的統一讀數，後兩者需要分別記錄。
7. 做無障礙與效能驗收
檢查瀏覽器縮放、系統字型偏好、鍵盤操作、讀屏順序、高對比度和 reduced motion。大範圍 zoom 或頻繁縮放可能增加版面和繪製成本；拖曳滑桿時可節流預覽，放開時再保存精確比例。
高品質示範回答
我會先確認縮放是否需要改變版面空間。需要改變捲動和兄弟元素位置時評估 zoom；只想放大畫布視覺且工具列位置不變時使用 transform: scale()，並自行處理原點、捲動和指標座標。畫布狀態不應改變頁面瀏覽器縮放，也不應讓彈窗繼承意外比例。巢狀 CSS zoom 用 currentCSSZoom 輔助除錯，但 transform 和頁面縮放分開記錄。最後測試鍵盤、焦點、讀屏、捲動、DPI、效能和行動裝置。
常見錯誤
- 認為
zoom和scale()都只影響視覺大小。 - 用 transform 放大後期待版面和捲動範圍自動擴大。
- 把畫布比例寫到根元素，導致工具列、彈窗和導覽一起縮放。
- 沒有處理縮放後的指標座標和焦點環。
- 把 currentCSSZoom 當成包含 transform 或瀏覽器頁面縮放的總比例。
追問及應對
什麼時候不該使用 CSS zoom？
需求是使用者閱讀放大時交給瀏覽器和系統；瀏覽器矩陣或版面副作用無法接受時，採用普通版面、容器查詢或應用座標變換。
transform 視覺邊界超出容器怎麼辦？
定義明確的裁切和捲動策略，測量變換後的邊界，並確保焦點和拖曳手柄仍可見。不要只加 overflow: hidden 隱藏問題。
點擊座標為什麼偏移？
事件座標通常相對視口，而畫布座標還要減去捲動、平移並除以應用比例。把轉換寫成單一可測試函式，並覆蓋不同 transform origin。
巢狀 zoom 如何避免失控？
限制縮放作用域，集中管理比例，記錄每層值和 currentCSSZoom，禁止元件在不知道祖先狀態時再次乘倍率。
如何測試瀏覽器頁面縮放？
在 100%、125%、200% 等設定下檢查重排、鍵盤順序、截斷和橫向捲動；不要把頁面縮放與應用畫布縮放混為同一驗收項。
面試中如何量化選擇？
比較版面移動、捲動範圍、命中誤差、焦點可見率、影格時間和輸入延遲，在目標裝置上記錄結果，再根據產品語意選擇屬性。