RWD Viewport - 可視範圍
Viewport 是使用者在網頁瀏覽器中可以看到的區域。在不同裝置上，Viewport 的大小會有所不同：
- 桌面電腦: 通常等於瀏覽器視窗大小。
- 平板電腦: 通常等於螢幕大小。
- 手機: 通常小於螢幕大小。因為有虛擬鍵盤、網址列等。
如果沒有設定 Viewport：
width: 100%，會以預設的桌面寬度為基準。- 手機瀏覽器會自動縮放整個頁面來塞進小螢幕，造成內容太小、排版錯亂。
正確設定 Viewport 的 HTML 語法
在 HTML 中的 <head> 標籤中加入以下這行:
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">1
屬性說明
| 屬性 | 功能說明 |
|---|---|
width=device-width | 設定 Viewport 的寬度與裝置的螢幕寬度一致。 |
initial-scale=1.0 | 初始縮放比例為 1 (100%)，即不放大不縮小。 |
minimum-scale=1.0 | 限制使用者最小縮放比例。 (可選) |
maximum-scale=1.0 | 限制使用者最大縮放比例。 (可選) |
user-scalable=no | 禁止使用者縮放頁面。(通常不推薦，會影響無障礙體驗) |