視口元標記
本文介紹瞭如何使用“視口”<meta> 標記來控制視口的大小和形狀。
背景
瀏覽器的視口是視窗中可以檢視 Web 內容的區域。這通常與渲染的頁面大小不同，在這種情況下，瀏覽器會為使用者提供捲軸以滾動並訪問所有內容。
一些移動裝置和其他窄螢幕裝置在虛擬視窗或視口中渲染頁面，該視口通常比螢幕寬，然後縮小渲染結果，以便可以一次看到所有內容。然後，使用者可以縮放和平移以更仔細地檢視頁面的不同區域。例如，如果移動螢幕的寬度為 640px，則頁面可能會以 980px 的虛擬視口進行渲染，然後將其縮小以適合 640px 的空間。
這樣做是因為並非所有頁面都針對移動裝置進行了最佳化，並且在以較小的視口寬度渲染時會中斷（或至少看起來很糟糕）。此虛擬視口是一種使非移動裝置最佳化網站在窄螢幕裝置上看起來更好的方法。
但是，這種機制對於使用媒體查詢針對窄螢幕進行了最佳化的頁面來說並不是很好——例如，如果虛擬視口為 980px，則在 640px 或 480px 或更小處觸發的媒體查詢將永遠不會使用，從而限制了此類響應式設計技術的有效性。視口<meta> 元素減輕了窄螢幕裝置上虛擬視口的問題。
視口基礎
一個典型的移動裝置最佳化網站包含如下內容
<meta name="viewport" content="width=device-width, initial-scale=1" />
並非所有裝置的寬度都相同；您應該確保您的頁面在各種螢幕尺寸和方向下都能正常工作。
“視口”<meta> 元素的基本屬性包括
width-
控制視口（最小）大小（請參閱視口寬度和螢幕寬度）。它可以設定為特定的畫素數，例如
width=600，也可以設定為特殊值device-width，即裝置螢幕以 CSS 畫素表示的物理尺寸。此值建立了vw單位的值。最小值：1。最大值：10000。負值：忽略。 height-
控制視口（最小）大小（請參閱視口寬度和螢幕寬度）。它可以設定為特定的畫素數，例如
height=400，也可以設定為特殊值device-height，即裝置螢幕以 CSS 畫素表示的物理尺寸。此值建立了vh單位的值。最小值：1。最大值：10000。負值：忽略。 initial-scale-
控制頁面首次載入時的縮放級別。最小值：
0.1。最大值：10。預設值：1。負值：忽略。 minimum-scale-
控制頁面上允許的縮小程度。最小值：
0.1。最大值：10。預設值：0.1。負值：忽略。 maximum-scale-
控制頁面上允許的放大程度。任何小於 3 的值都會導致無障礙訪問失敗。最小值：
0.1。最大值：10。預設值：10。負值：忽略。 user-scalable-
控制是否允許在頁面上進行放大和縮小操作。有效值：
0、1、yes或no。預設值：1，與yes相同。將值設定為0（與no相同）違反了 Web 內容無障礙指南 (WCAG)。 interactive-widget-
指定互動式 UI 小部件（如虛擬鍵盤）對頁面視口的影響。有效值：
resizes-visual、resizes-content或overlays-content。預設值：resizes-visual。
警告： 使用user-scalable=no 可能會導致視力障礙使用者（如低視力使用者）遇到無障礙訪問問題。WCAG 要求至少 2 倍縮放；但是，最佳實踐是啟用 5 倍縮放。
螢幕密度
螢幕解析度已上升到人眼無法區分單個畫素的程度。例如，智慧手機通常具有解析度高達 1920-1080 畫素（≈400dpi）的小螢幕。因此，許多瀏覽器可以透過為每個 CSS“畫素”轉換多個硬體畫素來以較小的物理尺寸顯示其頁面。最初，這在許多觸控最佳化網站上導致了可用性和可讀性問題。
在高 dpi 螢幕上，具有initial-scale=1 的頁面將由瀏覽器有效地縮放。它們的文字將平滑清晰，但它們的點陣圖影像可能無法利用完整的螢幕解析度。為了在這些螢幕上獲得更清晰的影像，Web 開發人員可能希望以高於其最終尺寸的比例設計影像——或整個佈局——然後使用 CSS 或視口屬性將其縮小。
預設畫素比例取決於顯示屏密度。在密度低於 200dpi 的顯示屏上，比例為 1.0。在密度介於 200 和 300dpi 之間的顯示屏上，比例為 1.5。對於密度超過 300dpi 的顯示屏，比例為整數向下取整 (density/150dpi)。請注意，預設比例僅在視口縮放比例等於 1 時才有效。否則，CSS 畫素和裝置畫素之間的關係取決於當前縮放級別。
視口寬度和螢幕寬度
網站可以將其視口設定為特定大小。例如，定義 "width=320, initial-scale=1" 可用於精確地適應縱向模式下的小型手機顯示屏。當瀏覽器以更大尺寸呈現頁面時，這可能會導致問題。為了解決此問題，瀏覽器將在必要時擴充套件視口寬度以在請求的縮放比例下填充螢幕。這在大型螢幕裝置上特別有用。
對於設定初始或最大縮放比例的頁面，這意味著 width 屬性實際上轉換為最小視口寬度。例如，如果您的佈局需要至少 500 畫素的寬度，則可以使用以下標記。當螢幕寬度超過 500 畫素時，瀏覽器將擴充套件視口（而不是放大）以適應螢幕。
<meta name="viewport" content="width=500, initial-scale=1" />
其他可用的屬性包括 minimum-scale、maximum-scale 和 user-scalable。這些屬性會影響初始縮放比例和寬度，以及限制縮放級別的變化。
互動式 UI 小部件的影響
瀏覽器的互動式 UI 小部件可能會影響頁面視口的大小。最常見的此類 UI 小部件是虛擬鍵盤。要控制瀏覽器應使用哪種調整大小行為，請設定 interactive-widget 屬性。
允許的值為
resizes-visual-
互動式小部件會調整視覺視口的大小。
resizes-content-
互動式小部件會調整視口的大小。
overlays-content
移動裝置和平板電腦的常見視口尺寸
如果您想知道哪些移動裝置和平板電腦具有哪些視口寬度，這裡有一個移動裝置和平板電腦視口大小的綜合列表。此列表提供了諸如縱向和橫向模式下的視口寬度、物理螢幕尺寸、作業系統以及裝置畫素密度等資訊。
規範
| 規範 |
|---|
| CSS 視口模組級別 1 # viewport-meta |