設定檢視區

當 PageSpeed Insights 偵測到您的網頁未指定檢視區,或是指定的檢視區無法根據不同裝置調整,就會觸發這個規則。

總覽

檢視區的用途是控制網頁在行動裝置上的顯示方式。如果沒有檢視區,行動裝置會鎖定一般電腦螢幕的寬側來顯示網頁,並根據螢幕大小進行縮放。只要設定檢視區,即可控制網頁寬度及其在不同裝置上的縮放方式。

左圖:沒有中繼檢視區的網頁。
右圖:檢視區與裝置寬度相符的網頁。

建議

如果要讓行動裝置呈現最佳的顯示效果,建議您在文件標題中加入中繼檢視區,並且為其指定 width=device-width, initial-scale=1 這項參數。

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

其他資訊

詞彙

  • 硬體像素:螢幕的實際像素。例如,iPhone 5 螢幕具有 640 個水平硬體像素。
  • 裝置獨立像素 (dip):根據正常觀看距離下的統一參照像素,將裝置像素縮放所得的像素單位。所有裝置上的大小約略相等。例如,iPhone 5 的螢幕寬度為 320 dip。
  • CSS 像素:檢視區用來控制網頁版面配置的單位。樣式中指定的像素尺寸為 CSS 像素,例如 width: 100px。網頁的比例因數指的就是 CSS 像素和裝置獨立像素之間的比例,也稱為縮放因數。

行動裝置上的電腦版網頁

當網頁沒有指定檢視區時,行動瀏覽器會以範圍介於 800 到 1024 CSS 像素的「遞補寬度」來顯示網頁。由於網頁是按照頁面比例縮放呈現,所以畫面會填滿整個螢幕,使用者必須縮放後才能順利與網頁互動。

中繼檢視區標記

中繼檢視區標記會向瀏覽器指出如何控制網頁的大小和縮放,應置於文件的標題部分。

固定寬度檢視區

您可以為檢視區設置固定寬度,例如 width=320width=1024。雖然我們不鼓勵,但若要快速確保網頁以預期固定尺寸顯示,這會是很實用的權宜之計。

回應式檢視區

您可以使用 width=device-width 的中繼檢視區值,指示網頁配合螢幕寬度的裝置獨立像素顯示畫面。這樣一來,瀏覽器即可根據不同的螢幕尺寸重排網頁內容。

部分瀏覽器 (包括 iOS 和 Windows Phone) 會在網頁旋轉為垂直模式時保持寬度不變,以縮放而非重排的方式填滿畫面。新增 initial-scale=1 屬性可指示瀏覽器無視裝置螢幕方向,在 CSS 像素和裝置獨立像素之間建立 1:1 的關係,以充分利用橫向寬度。

vs
左圖:根據 width=device-width 的設定旋轉方向,iPhone 5 的橫向寬度為 320px。
右圖:根據 width=device-width, initial-scale=1 的設定旋轉方向,iPhone 5 的橫向寬度為 568px。

您必須為網頁採用回應檢視區,系統才會根據不同寬度調整網頁。如需相關建議,請參閱調整檢視區內容大小的建議部分。

其他注意事項

請避免使用 minimum-scalemaximum-scaleuser-scalable

您可以設定縮放的上限和下限值,也可以為使用者停用縮放整個檢視區的功能。不過,這些做法會對可用性帶來不良影響,因此一般還是避免為佳。

@viewport

中繼檢視區標記雖受到廣泛支援,但是並未列入正式標準。根據 CSS 裝置適應規格,這類行為已包含在 CSS 中。在此規格完成並廣泛實作前,作者必須持續使用中繼檢視區標記以達成相容目的,無論是要單獨使用,還是與 @viewport 樣式一併使用皆可。

資源: