當PageSpeed Insights檢測到您的網頁未指定視口，或者指定的視口不適合不同設備時，就會觸發(fā)此規(guī)則。

視口可控制網頁在移動設備上的顯示方式。如果未指定視口，移動設備將以典型桌面屏幕的寬度來呈現網頁，并調整網頁使其適合屏幕大小。通過設置視口，您可以控制網頁在不同設備上的寬度和縮放比例。

 

經過優(yōu)化可在移動設備上正常顯示的網頁應在文檔標頭中包含元視口，指定如下內容：width=device-width, initial-scale=1。

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

• 硬件像素：顯示器的物理像素。例如，iPhone 5所配屏幕的水平硬件像素為640。
• 設備無關像素(dip)：在正常視距下，符合統一參考像素的設備像素比例，此像素在所有設備上大小幾乎相同。iPhone 5的設備無關像素寬度為320。
• CSS像素：用于頁面布局的單位，由視口控制。樣式的像素尺寸（例如width: 100px）是以CSS像素為單位指定的。CSS像素與設備無關像素的比例即為網頁的比例系數或縮放級別。

如果網頁未指定視口，則移動瀏覽器將以800至1024 CSS像素的后備寬度呈現該網頁。系統會調整網頁的比例系數，以便網頁與顯示屏大小相協調，這就要求用戶在與網頁互動之前先進行縮放。

元視口代碼會為瀏覽器提供指示，說明如何控制網頁的尺寸和比例，且文檔標頭中應包含此代碼。

視口可設置為特定的寬度，例如width=320或width=1024。雖然我們不建議這樣做，但這能有效確保具有固定尺寸的網頁能按預期顯示。

使用元視口值width=device-width可指示網頁與屏幕寬度（以設備無關像素為單位）進行匹配。這樣，網頁就可以重排內容以匹配不同的屏幕尺寸。

有些瀏覽器（包括iOS和Windows Phone）在旋轉為橫向模式時會保持網頁寬度不變，并且會縮放（而非重排）網頁以填充屏幕。添加屬性initial-scale=1均可指示瀏覽器將CSS像素與設備無關像素的比例設為1:1（而不用考慮設備的屏幕方向），并且可讓網頁利用整個橫向寬度。

網頁必須適應不同的寬度才能使用響應視口。有關建議，請參見我們針對調整內容的尺寸，使其符合視口設置的建議。

您可以設置縮放級別的下限和上限，也可以徹底禁止用戶縮放視口。這些選項會對可訪問性造成負面影響，因此一般情況下您應避免使用這些選項。

盡管元視口代碼受到了廣泛支持，但目前尚不屬于正式標準。此操作會作為CSS設備適配規(guī)范的一部分納入CSS。本規(guī)范最終定稿并廣泛實施之前，作者應繼續(xù)使用元視口代碼，從而確保兼容性。您可以單獨使用，也可以與相應的@viewport樣式搭配使用。

• Safari網絡內容指南中的Configuring the Viewport（配置視口）一文。
• 怪異模式“雙視口記”：第一部分和第二部分。
• A List Apart中刊登的A Pixel Identity Crisis（像素定義引發(fā)的認同危機）一文。
• Opera和Mozilla上提供的視口文檔。
• HTML5 Rocks中刊登的Creating a Mobile-First Responsive Web Design（創(chuàng)建移動先行響應網頁設計）一文。

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.