meta viewport：行動裝置友善為什麼是 SEO 的門檻
viewport 是那種「有就沒事、沒有就整頁壞掉」的設定。搜尋引擎現在主要以 行動裝置的版本 評估網頁，所以行動裝置上讀不了，等於整頁的 SEO 都受影響。
<meta name="viewport" content="width=device-width, initial-scale=1.0">九成的網站只需要這一行。
不寫會發生什麼
行動瀏覽器會假設您是桌機網站
沒有 viewport 時，行動瀏覽器會用大約 980 像素 的虛擬寬度排版，再把整頁 縮小 塞進實際螢幕。
後果有兩層：
- 文字小到讀不了：使用者必須雙指放大才看得清楚。
- 媒體查詢完全失效：媒體查詢 比對的寬度來自 viewport，回報 980 像素時，所有針對手機寫的斷點都不會觸發。
第二點特別容易讓人困惑：明明寫了完整的 響應式設計 ，在手機上卻完全沒生效，原因就是少了這一行。
各參數的作用
| 參數 | 說明 | 建議值 |
|---|---|---|
width | 排版用的可視範圍寬度 | device-width |
initial-scale | 初次載入的縮放比例 | 1.0 |
minimum-scale | 允許縮到多小 | 不設定 |
maximum-scale | 允許放到多大 | 不要設定 |
user-scalable | 允不允許手動縮放 | 不要設定 |
viewport-fit | 是否延伸到瀏海與圓角區 | 全螢幕設計用 cover |
width=device-width
告訴瀏覽器 用裝置的實際寬度排版，而不是虛擬的桌機寬度。這是整個標籤的核心。
initial-scale=1.0
讓頁面以百分之百的比例開始顯示。少了它，部分瀏覽器在特定情況下會沿用自己的初始縮放值，造成首次顯示的比例不一致。
實際的可視範圍寬度是 width 與 initial-scale 兩者共同決定的，兩個都寫才穩。
不要鎖死縮放
這兩個設定不該出現
<!-- 不要這樣寫 -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
>禁止縮放會讓 視力不佳的使用者無法放大內容閱讀，屬於明確的無障礙缺陷，也會被 Lighthouse 的無障礙檢查標記。現代瀏覽器有些甚至會直接忽略這個設定。
常見的動機是「避免使用者不小心放大弄亂版面」。正確的解法是把版面做好，而不是剝奪使用者的控制權。
全螢幕設計的 viewport-fit
有瀏海或圓角的裝置上，若希望背景延伸到整個螢幕：
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
>搭配安全區域的環境變數，避免內容被瀏海遮住：
.header {
padding-top: env(safe-area-inset-top);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}一般網站不需要
viewport-fit=cover 只在「背景要滿版」時才有意義。純內容型網站用預設值就好，加了反而要處理安全區域的內距。
和版面穩定度的關係
設定錯誤或缺漏時，瀏覽器可能 先用一種寬度排版、確定 viewport 後再重排一次，那次重排就是一次版面位移，會計入 CLS 。
設定正確時排版寬度從一開始就確定，不會有這個問題。所以 viewport 雖然不是效能設定，卻是 CLS 的前提。
相關的行動裝置檢查
viewport 只是行動裝置友善的第一步。搜尋引擎還會看這些：
| 檢查 | 標準 |
|---|---|
有 viewport 且未鎖死縮放 | 必備 |
| 內容不需要橫向滑動 | 必備 |
| 文字大小足夠（正文至少 16 像素） | 建議 |
| 可點擊元素間距足夠（至少 48 像素觸控區） | 建議 |
| 沒有妨礙閱讀的插頁式廣告 | 必備 |
「內容不需要橫向滑動」最常見的兇手是固定寬度的元素，表格、程式碼區塊、寬圖。解法是讓它們在自己的容器內滑動：
.table-wrapper {
overflow-x: auto;
}斷點策略與測試工具見 行動優先與斷點策略 與 RWD 測試工具 。
檢查清單
| 項目 | 標準 |
|---|---|
每頁都有 viewport | 必備 |
值為 width=device-width, initial-scale=1.0 | 必備 |
沒有 user-scalable=no | 必備 |
沒有 maximum-scale=1.0 | 必備 |
| 手機上不需要橫向滑動 | 必備 |
常見問題
不寫 viewport 會怎樣？
行動瀏覽器會假設這是為桌機做的網頁，用大約 980 像素的虛擬寬度排版再整體縮小塞進螢幕。結果是文字小到必須放大才看得清，而且 媒體查詢 的斷點完全不會生效。
可以鎖住縮放嗎？
技術上可以，但不該做。禁止縮放會讓視力不佳的使用者無法放大內容閱讀，屬於明確的無障礙缺陷，也會被稽核工具標記。現代瀏覽器有些甚至會忽略這個設定。
viewport 和媒體查詢有什麼關係？
媒體查詢比對的寬度來自 viewport。沒有設定 viewport 時，行動裝置回報的是桌機的虛擬寬度，所有針對手機寫的斷點都不會觸發，等於整套 響應式設計 失效。
initial-scale 要寫嗎？
要，而且要設為 1。它讓頁面以百分之百的比例開始顯示。少了它，部分瀏覽器在特定情況下會沿用自己的初始縮放值，造成首次顯示的比例不一致。
viewport 會影響版面穩定度嗎？
會間接影響。設定錯誤或缺漏時，瀏覽器可能先用一種寬度排版、確定 viewport 後再重排一次，那次重排就是一次版面位移，會計入 累積版位偏移 。設定正確時排版寬度從一開始就確定，不會有這個問題。
