根據檢視區調整內容大小

當 PageSpeed Insights 偵測到網頁內容寬度超過指定檢視區,造成使用者必須平移才能查看所有內容,就會觸發這個規則。

總覽

在電腦和行動裝置上,使用者習慣以上下捲動的方式瀏覽網站,很少會左右捲動網頁,因此如需左右捲動或縮小才能查看完整頁面,將不利使用者的操作。

使用中繼檢視區標記來設計行動版網站時,很容易不小心建立內容大小與指定檢視區不符的網頁。具體來說,如果圖片的顯示寬度超過檢視區,使用者就需要左右捲動檢視區。對於這種情形,您必須配合檢視區調整內容寬度,讓使用者不必左右捲動頁面。

建議

由於手機和平板電腦的螢幕尺寸差異很大,甚至不同款手機之間的螢幕尺寸也各不相同,因此建議您設置檢視區,以便網頁在各種不同的裝置上都能適當轉譯。然而,由於檢視區寬度 (單位為 CSS 像素) 可能改變,所以網頁內容最好不要鎖定特定檢視區的寬度轉譯,以提供良好的顯示效果。

  • 避免設定絕對 CSS 寬度值很高的網頁元素 (例如 div{width:360px;}),因為在狹長型的裝置上,這類元素的寬度可能超過檢視區的寬度。比方說,320 CSS 像素寬度對 iPhone 等裝置而言,就會造成這種狀況。作為替代方案,請考慮使用 width:100% 這樣的相對寬度值。同樣地,請注意高度絕對定位值的使用,以免元素顯示在小型螢幕上時落到檢視區外面。
  • 如有需要,您也可以使用 CSS 媒體查詢來針對大小螢幕套用不同樣式。如需這種做法的進一步建議,請參閱這篇 HTML5 Rocks 文章
  • 對於圖片方面的處理,這篇文章充分介紹了如何根據要求回應適當大小的圖片,避免轉譯網頁時發生不必要的自動重排。