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

概覽

Viewport can control how web pages are displayed on mobile devices. If no viewport is specified, the mobile device renders the Web page to the width of a typical desktop screen and adjusts the Web page to fit the screen size. By setting the viewport, you can control the width and scaling of web pages on different devices.

?

Left: Web page with no meta-viewport specified.

建議

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

其他信息

術(shù)語：

• Hardware pixel: The physical pixel of the display. For example, the iPhone 5 comes with a screen with 640 horizontal hardware pixels.
• Device-independent pixels (dip): under normal visual distance, it conforms to uniform參考像素的設(shè)備像素比例，此像素在所有設(shè)備上大小幾乎相同。iPhone 5的設(shè)備無關(guān)像素寬度為320。
• CSS像素：用于頁面布局的單位，由視口控制。樣式的像素尺寸（例如width: 100px) is specified in units of CSS pixels. The ratio of CSS pixels to device-independent pixels is the scale factor or zoom level of the web page.

Desktop Web Pages on Mobile Devices

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

元視口代碼

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

固定寬度的視口

The viewport can be set to a specific width, such aswidth=320或width=1024。雖然我們不建議這樣做，但這能有效確保具有固定尺寸的網(wǎng)頁能按預(yù)期顯示。

響應(yīng)視口

Use meta-viewport valueswidth=device-width可指示網(wǎng)頁與屏幕寬度（以設(shè)備無關(guān)像素為單位）進行匹配。這樣，網(wǎng)頁就可以重排內(nèi)容以匹配不同的屏幕尺寸。

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

Web pages must adapt to different widths to use the response viewport. For suggestions, please refer to our調(diào)整內(nèi)容的尺寸，使其符合視口設(shè)置的建議。

其他注意事項

Please avoid usingminimum-scale、maximum-scale、user-scalable

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

@ viewport

Although meta-viewport code is widely supported, it is not yet a formal standard. This action will act as aCSS Device Adaptation規(guī)范的一部分納入CSS。本規(guī)范最終定稿并廣泛實施之前，作者應(yīng)繼續(xù)使用元視口代碼，從而確保兼容性。您可以單獨使用，也可以與相應(yīng)的@viewport樣式搭配使用。

Resources:

• In the Safari Web Content GuideConfiguring the Viewport一文。
• 怪異模式“雙視口記”：第一部分和第IIPart.
• Published in A List PartA Pixel Identity Crisis（像素定義引發(fā)的認同危機）一文。
• OperaAndMozillaThe viewport document provided on.
• Published in HTML5 RocksCreating a Mobile-First Responsive Web Design（創(chuàng)建移動先行響應(yīng)網(wǎng)頁設(shè)計）一文。

Except as other written, the content of this page is licensed under theCreative Commons Attribution 3.0 License, and code samples are licensed under theApache 2.0 License. For details, see our?Site Policies.