分類: 開發工具
Viewport Meta 產生器
產生響應式 viewport meta 標籤，並了解各選項的作用
設定頁面 viewport meta 標籤的寬度、初始縮放比例、縮放上下限、雙指縮放權限和 viewport-fit，並附上每個選項的簡短說明，再把完成的標籤複製到你的 <head> 中。全部在瀏覽器本機完成。
關閉此選項會封鎖雙指縮放，影響無障礙使用——大多數網站應保持開啟。
Meta 標籤
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
viewport meta 標籤告訴行動裝置瀏覽器該如何縮放與顯示頁面大小——沒有它，手機會以固定的、類似桌機的寬度呈現頁面並自動縮小，這也是為什麼行動裝置友善度檢測工具最先檢查的項目之一。設定 width=device-width 和 initial-scale=1 就能涵蓋常見情境，但縮放上下限與 viewport-fit 選項值得先了解再使用，而不是照抄，因為完全停用縮放對低視力使用者來說是無障礙問題。
使用方式
- 除非有特殊需求，否則寬度保持為 "device-width"。
- 設定初始縮放比例，並視需要設定最小／最大縮放上下限。
- 決定是否允許雙指縮放——建議保持開啟。
- 如果版面需要延伸到瀏海或安全區域範圍內，選擇適合的 viewport-fit 值。
- 把產生的標籤複製到頁面的 <head> 中。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 我該停用 user-scalable 來避免「意外」縮放嗎？
- 一般不建議——封鎖雙指縮放會讓低視力訪客無法放大閱讀內容，這違反了無障礙指引（WCAG 1.4.4）。應該修正版面問題，而不是停用縮放。
- viewport-fit=cover 實際上做了什麼？
- 在有瀏海或圓角的裝置上，它能讓頁面背景延伸進入這些安全區域（safe-area insets），而不是留下一塊黑邊；同時你可以搭配 env(safe-area-inset-*) 這組 CSS 函式，讓實際內容不被瀏海遮住。
- width=device-width 一定是對的嗎？
- 對絕大多數響應式網站來說是的——它讓 CSS viewport 符合裝置的原生寬度，使你的響應式斷點能可預期地運作。