RWD 可視範圍 viewport：行動裝置的縮放設定
Viewport 是使用者在網頁瀏覽器中可以看到的區域。在不同裝置上，Viewport 的大小會有所不同：
- 桌面電腦: 通常等於瀏覽器視窗大小。
- 平板電腦: 通常等於螢幕大小。
- 手機: 通常小於螢幕大小。因為有虛擬鍵盤、網址列等。
如果沒有設定 Viewport：
width: 100%，會以預設的桌面寬度為基準。- 手機瀏覽器會自動縮放整個頁面來塞進小螢幕，造成內容太小、排版錯亂。
正確設定 Viewport 的 HTML 語法
在 HTML 中的 <head> 標籤中加入以下這行:
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">屬性說明
| 屬性 | 功能說明 |
|---|---|
width=device-width | 設定 Viewport 的寬度與裝置的螢幕寬度一致。 |
initial-scale=1.0 | 初始縮放比例為 1 (100%)，即不放大不縮小。 |
minimum-scale=1.0 | 限制使用者最小縮放比例。 (可選) |
maximum-scale=1.0 | 限制使用者最大縮放比例。 (可選) |
user-scalable=no | 禁止使用者縮放頁面。(通常不推薦，會影響無障礙體驗) |
標準寫法
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">這一行請寫在 檔頭 head 裡，屬性的完整說明可參考 meta 元資訊。
少了它，行動瀏覽器會用約 980 像素的虛擬寬度排版再整體縮小，底下寫的所有 媒體查詢 斷點都不會生效。它與行動裝置友善、版面穩定度的關係見 meta viewport 與 SEO。
安全區域
瀏海與圓角螢幕上，內容可能被切到：
html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">css
.page {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
}小提醒
別用 user-scalable=no 或 maximum-scale=1 禁止縮放，那會讓需要放大閱讀的使用者無從調整。
常見問題
沒有設定 viewport 會怎樣？
手機會以桌機的寬度渲染頁面，再整頁縮小顯示，文字小到看不清楚，媒體查詢 也不會如預期生效。
可以禁止使用者縮放嗎？
技術上可以，但強烈不建議。那會讓需要放大閱讀的使用者無從調整，也是無障礙檢測的明確扣分項。
瀏海與圓角螢幕要怎麼處理？
在 viewport 設定中加入 viewport-fit=cover，再用安全區域的環境變數替內容留出內距，內容才不會被瀏海或圓角切到。
