當(dāng)PageSpeed Insights檢測到您的網(wǎng)頁未指定視口，或者指定的視口不適合不同設(shè)備時(shí)，就會觸發(fā)此規(guī)則。
視口可控制網(wǎng)頁在移動設(shè)備上的顯示方式。如果未指定視口，移動設(shè)備將以典型桌面屏幕的寬度來呈現(xiàn)網(wǎng)頁，并調(diào)整網(wǎng)頁使其適合屏幕大小。通過設(shè)置視口，您可以控制網(wǎng)頁在不同設(shè)備上的寬度和縮放比例。
?.jpg)
經(jīng)過優(yōu)化可在移動設(shè)備上正常顯示的網(wǎng)頁應(yīng)在文檔標(biāo)頭中包含元視口，指定如下內(nèi)容：width=device-width, initial-scale=1.
< meta name=viewport content="width=device-width,initial-scale=1" >- ???? ??: ???? ??? ?????. ?? ??, iPhone 5? ??? ??? ?? ???? ??? 640??.
- 設(shè)備無關(guān)像素(dip)：在正常視距下，符合統(tǒng)一參考像素的設(shè)備像素比例，此像素在所有設(shè)備上大小幾乎相同。iPhone 5的設(shè)備無關(guān)像素寬度為320。
- CSS ??: ???? ?? ???? ??? ????? ??. ???? ?? ??(?:
width: 100px）是以CSS像素為單位指定的。CSS像素與設(shè)備無關(guān)像素的比例即為網(wǎng)頁的比例系數(shù)或縮放級別。
如果網(wǎng)頁未指定視口，則移動瀏覽器將以800至1024 CSS像素的后備寬度呈現(xiàn)該網(wǎng)頁。系統(tǒng)會調(diào)整網(wǎng)頁的比例系數(shù)，以便網(wǎng)頁與顯示屏大小相協(xié)調(diào)，這就要求用戶在與網(wǎng)頁互動之前先進(jìn)行縮放。
元視口代碼會為瀏覽器提供指示，說明如何控制網(wǎng)頁的尺寸和比例，且文檔標(biāo)頭中應(yīng)包含此代碼。
???? ?? ??? ??? ? ????(?:width=320或width=1024。雖然我們不建議這樣做，但這能有效確保具有固定尺寸的網(wǎng)頁能按預(yù)期顯示。
使用元視口值width=device-width可指示網(wǎng)頁與屏幕寬度（以設(shè)備無關(guān)像素為單位）進(jìn)行匹配。這樣，網(wǎng)頁就可以重排內(nèi)容以匹配不同的屏幕尺寸。
有些瀏覽器（包括iOS和Windows Phone）在旋轉(zhuǎn)為橫向模式時(shí)會保持網(wǎng)頁寬度不變，并且會縮放（而非重排）網(wǎng)頁以填充屏幕。添加屬性initial-scale=1?????? ??? ?? ??? ???? CSS ??? ?? ??? ??? ?? 1:1? ???? ? ???? ?? ?? ??? ????? ? ? ????.
width=device-width，橫向?qū)挾茸優(yōu)?20像素。width=device-width, initial-scale=1，橫向?qū)挾茸優(yōu)?68像素。網(wǎng)頁必須適應(yīng)不同的寬度才能使用響應(yīng)視口。有關(guān)建議，請參見我們針對調(diào)整內(nèi)容的尺寸，使其符合視口設(shè)置的建議。
您可以設(shè)置縮放級別的下限和上限，也可以徹底禁止用戶縮放視口。這些選項(xiàng)會對可訪問性造成負(fù)面影響，因此一般情況下您應(yīng)避免使用這些選項(xiàng)。
盡管元視口代碼受到了廣泛支持，但目前尚不屬于正式標(biāo)準(zhǔn)。此操作會作為CSS設(shè)備適配??? ??? CSS? ????. ? ??? ????? ???? ?? ??? ??? ???? ????? ??? ?? ?????? ???? ???? ??. ????? ??? ?? ??,@viewport樣式搭配使用。
- Safari ? ??? ????Configuring the Viewport（配置視口）一文。
- 怪異模式“雙視口記”：第???? ? ??二部分。
- A List Apart中刊登的A Pixel Identity Crisis (?? ??? ?? ??? ??)一文。
- Opera和Mozilla?? iDrop ?????? ??????.
- HTML5 Rocks中刊登的Creating a Mobile-First Responsive Web Design（創(chuàng)建移動先行響應(yīng)網(wǎng)頁設(shè)計(jì)）? ??
Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 3.0 License, and code samples are licensed under the?Apache 2.0 License. For details, see ourSite Policies.
