<meta name="viewport">

用法說明

<meta name="viewport"> 元素具有以下附加屬性

content

必須定義 content 屬性，其值設定了各種與視口相關的行為。其值是以逗號分隔的一個或多個鍵值對列表，格式為 key=value。定義了以下鍵：

width

控制視口的（最小）畫素寬度（請參閱視口寬度和螢幕寬度）。它可以設定為 1 到 10000 之間的正整數畫素值（例如 width=600），或者特殊值 device-width，即裝置螢幕的 CSS 畫素物理尺寸。此值確立了 vw 單位的值。

height

控制視口的（最小）畫素高度（請參閱視口寬度和螢幕寬度）。它可以設定為 1 到 10000 之間的正整數畫素值（例如 height=400），或者特殊值 device-height，即裝置螢幕的 CSS 畫素物理尺寸。此值確立了 vh 單位的值。

initial-scale

定義裝置寬度（在縱向模式下為 device-width，在橫向模式下為 device-height）與視口大小之間的比率。它可以是介於 0.0 和 10.0 之間的一個數字。

maximum-scale

定義最大縮放量。它必須大於或等於 minimum-scale，否則行為未定義。瀏覽器設定可能會忽略此規則，iOS10+ 預設忽略此規則。它可以是 0.0 到 10.0 之間的一個數字。

minimum-scale

定義最小縮放級別。它必須小於或等於 maximum-scale，否則行為未定義。瀏覽器設定可能會忽略此規則，iOS10+ 預設忽略此規則。它可以是 0.0 到 10.0 之間的一個數字。

user-scalable

一個布林值，指示使用者是否可以縮放網頁。瀏覽器設定可能會忽略此規則，iOS10+ 預設忽略此規則。它可以是 yes 或 no，預設為 yes。

警告：透過將 user-scalable 設定為 no 來停用縮放功能會阻止視力低下的人閱讀和理解頁面內容。此外，WCAG 要求至少 2 倍縮放；然而，最佳實踐是啟用 5 倍縮放。欲瞭解更多資訊，請參閱：

• MDN 理解 WCAG，指南 1.4 解釋
• 理解成功標準 1.4.4 | W3C 理解 WCAG 2.0

interactive-widget

指定互動式 UI 小部件（例如虛擬鍵盤）對頁面視口的影響。它可以是關鍵字 resizes-visual、resizes-content 或 overlays-content。

• resizes-visual：視覺視口由互動式小部件調整大小。這是預設值。
• resizes-content：視口由互動式小部件調整大小。
• overlays-content：視口和視覺視口都不會被互動式小部件調整大小。

當視口被調整大小時，初始的包含塊也會被調整大小，從而影響視口單位的計算大小。

viewport-fit

定義網頁的可視部分。它可以是關鍵字 auto、contain 或 cover 之一。

• auto：不影響初始佈局視口，整個網頁可見。
• contain：視口被縮放以適應顯示器內最大內接矩形。
• cover：視口被縮放以填充裝置顯示。強烈建議使用 安全區域插入變數，以確保重要內容不會超出顯示範圍。

視口寬度和螢幕寬度

瀏覽器的視口是視窗中可以檢視網頁內容的區域。在佈局頁面內容之前需要計算視口大小——頁面可能會溢位視口，在這種情況下，瀏覽器會提供捲軸供使用者滾動以訪問所有內容，但視口大小是內容應該適應多少空間，尤其是水平方向空間的指導方針。

一些移動裝置和其他窄螢幕裝置會在一個比螢幕寬的虛擬視窗或視口中渲染頁面，然後將渲染結果縮小以適應螢幕尺寸。使用者可以隨後縮放和平移以更仔細地檢視頁面的不同區域。例如，如果一個移動螢幕的寬度為 640 畫素，頁面可能會在一個 980 畫素的虛擬視口中渲染，然後它將被縮小以適應 640 畫素的空間。這樣做是因為並非所有頁面都針對移動裝置進行了最佳化，並且在小視口寬度下渲染時會崩潰（或者至少看起來很糟糕）。這個虛擬視口是一種讓非移動裝置最佳化網站在窄螢幕裝置上看起來更好的方法。然而，對於使用媒體查詢針對窄螢幕進行最佳化的頁面來說，這種機制就不那麼好——例如，如果虛擬視口是 980 畫素，那麼在 640 畫素或 480 畫素或更小尺寸時觸發的媒體查詢將永遠不會被使用，從而限制了此類響應式設計技術的有效性。視口 <meta> 元素緩解了窄螢幕裝置上虛擬視口的問題。

最常見的設定如下，它將視口設定為匹配裝置的寬度，並以 100% 縮放顯示內容：

<meta name="viewport" content="width=device-width, initial-scale=1" />

網站可以將視口設定為特定大小。例如，定義 "width=320, initial-scale=1" 可用於在縱向模式下精確適應小型手機顯示屏。當瀏覽器以較大尺寸渲染頁面時，這可能會導致問題。為了解決這個問題，瀏覽器會在必要時擴充套件視口寬度，以在請求的縮放比例下填充螢幕。這在大型螢幕裝置上特別有用。

對於設定了初始或最大縮放的頁面，這意味著 width 屬性實際上會轉換為一個最小視口寬度。例如，如果你的佈局至少需要 500 畫素的寬度，那麼你可以使用以下標記。當螢幕寬度超過 500 畫素時，瀏覽器會擴充套件視口（而不是放大）以適應螢幕：

<meta name="viewport" content="width=500, initial-scale=1" />

螢幕密度

螢幕解析度已提高到人眼無法分辨單個畫素的程度。例如，智慧手機通常具有解析度高達 1920×1080 畫素（約 400dpi）的小螢幕。因此，許多瀏覽器可以透過將多個硬體畫素轉換為每個 CSS“畫素”來以較小的物理尺寸顯示頁面。最初，這在許多針對觸控最佳化的網站上造成了可用性和可讀性問題。

在高 DPI 螢幕上，initial-scale=1 的頁面實際上會被瀏覽器放大。它們的文字會平滑清晰，但它們的點陣圖影像可能無法充分利用螢幕解析度。為了在這些螢幕上獲得更清晰的影像，網頁開發者可能希望以高於其最終尺寸的比例設計影像——或整個佈局——然後使用 CSS 或視口屬性將它們縮小。

預設畫素比取決於顯示密度。在密度小於 200dpi 的顯示器上，比例為 1.0。在密度介於 200 到 300dpi 之間的顯示器上，比例為 1.5。對於密度超過 300dpi 的顯示器，比例為整數下限（密度/150dpi）。請注意，預設比例僅在視口比例等於 1 時成立。否則，CSS 畫素與裝置畫素之間的關係取決於當前縮放級別。

示例

使用 meta 視口大小

以下示例指示瀏覽器頁面應以裝置寬度呈現：

<meta name="viewport" content="width=device-width" />

將媒體查詢與視口元標籤一起使用

以下 content 值使用了多個關鍵字，提示瀏覽器使用全屏模式，並結合了 viewport-fit，這有助於避免移動裝置劉海等顯示切口：

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

互動式 UI 小部件的影響

瀏覽器的互動式 UI 小部件會影響頁面視口的大小。最常見的此類 UI 小部件是虛擬鍵盤。要控制瀏覽器應使用哪種調整大小行為，請設定 interactive-widget 屬性。

預設情況下，虛擬鍵盤只會調整視覺視口的大小，這不會影響頁面佈局。你可以透過將 interactive-widget 屬性設定為 resizes-content 來使頁面佈局適應虛擬鍵盤的出現：

<meta name="viewport" content="interactive-widget=resizes-content" />

規範

瀏覽器相容性

另見

• 視口詞彙表術語
• 為 Chrome 安卓版即將推出的視口調整大小行為變化做準備，來自 developer.chrome.com
• 適用於響應式體驗的移動視口，來自 Adobe Experience League