當(dāng)PageSpeed Insights檢測(cè)到網(wǎng)頁(yè)內(nèi)容不適合在指定尺寸的視口內(nèi)水平顯示，而強(qiáng)制用戶(hù)水平移動(dòng)網(wǎng)頁(yè)以查看所有內(nèi)容時(shí)，就會(huì)觸發(fā)此規(guī)則。

概覽

在桌面設(shè)備和移動(dòng)設(shè)備上，用戶(hù)習(xí)慣于垂直（而非水平）滾動(dòng)瀏覽網(wǎng)站，而強(qiáng)制用戶(hù)水平滾動(dòng)或縮小以查看完整網(wǎng)頁(yè)會(huì)給用戶(hù)帶來(lái)很差的體驗(yàn)。

在使用元視口代碼開(kāi)發(fā)移動(dòng)網(wǎng)站的過(guò)程中，您往往會(huì)在無(wú)意中創(chuàng)建并不適用于指定視口的網(wǎng)頁(yè)內(nèi)容。例如，如果在視口中顯示大于視口寬度的圖片，會(huì)迫使用戶(hù)水平滾動(dòng)該視口。您應(yīng)調(diào)整此內(nèi)容，使其符合視口的寬度。這樣一來(lái)，用戶(hù)就不用水平滾動(dòng)視口了。

建議

不同的設(shè)備其屏幕尺寸會(huì)有很大的差異（例如，手機(jī)和平板電腦，甚至是不同款的手機(jī)），為此您應(yīng)配置相應(yīng)視口，以便您的網(wǎng)頁(yè)能在許多不同的設(shè)備上正確呈現(xiàn)。然而，由于視口寬度（以CSS像素為單位）可能會(huì)有所不同，因此，您的網(wǎng)頁(yè)內(nèi)容不應(yīng)依賴(lài)于能正常顯示的特定視口寬度。

• 避免為網(wǎng)頁(yè)元素設(shè)置較大的絕對(duì)CSS寬度（例如，div{width:360px;}），因?yàn)檫@可能會(huì)導(dǎo)致該元素在寬度較窄的設(shè)備（例如，像iPhone這類(lèi)其寬度為320 CSS像素的設(shè)備）上顯得過(guò)寬。請(qǐng)考慮使用相對(duì)寬度值（例如，width:100%）。同樣，您應(yīng)注意使用較大的絕對(duì)定位值可能會(huì)導(dǎo)致元素超出較小屏幕的視口。
• 如有必要，您可以使用CSS媒體查詢(xún)為較小或較大屏幕應(yīng)用不同的樣式。這篇HTML5 Rocks文章提供了有關(guān)如何實(shí)現(xiàn)這一目標(biāo)的進(jìn)一步建議。
• 針對(duì)圖像，請(qǐng)參閱這篇文章，其中提供了有關(guān)如何在網(wǎng)頁(yè)呈現(xiàn)期間且在不產(chǎn)生不必要網(wǎng)頁(yè)重排的情況下提供相應(yī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.