前端:移動開發 – 畫素、viewport

前端:移動開發 – 畫素、viewport

知識

CSS 畫素、物理畫素、PPI

CSS 畫素

CSS 畫素

應用

CSS 和 圖片

對於開發者,實際應用中應該根據螢幕尺寸和 裝置畫素比(devicePixelRatio)來反推 CSS pixel。

也就是說:假設裝置畫素比為 2,設計圖要做成了 720×1280 的,那麼 CSS 裡所有尺寸都除以 2 即可。

而對於圖片,比如一張實際大小 100x100px 的圖片,並且 width 和 height 都設了 100px(注意這裡的 px 是 css pixel),實際佔用了螢幕的畫素數就是(假設裝置畫素比是 3)300x300px(注意這裡的 px 是真實的螢幕畫素),也就是說,變模糊了。所以,如果希望網頁的元素在高 PPI 裝置上顯示不模糊(比如 1080×1920 螢幕的手機),點陣圖應該做 3 倍的尺寸(比如做 300x300px 的圖,然後在 CSS 中設 width 和 height 為 100px),svg(向量圖)就無所謂了。

媒體查詢

注意這裡的 px 是指邏輯畫素,即 CSS 檔案中的 width、height。
max-width

Viewport

別以為當我們為了適配手機端的問題,而特意根據螢幕尺寸和 devicePixelRatio 來反推 CSS pixel,就可以在手機端上優雅地顯示網頁了,手機瀏覽器又涉及到有關 viewport 的概念。這裡介紹一下 layout viewport 和 visual viewport。

Layout viewport – 渲染檢視,渲染頁面所需要的尺寸

Visual viewport – 視覺檢視,瀏覽器可視區域尺寸

Layout viewport

移動裝置上的瀏覽器認為自己必須能讓所有的網站都正常顯示,即使是那些不是為移動裝置設計的網站。但如果以瀏覽器的可視區域作為 viewport 的話,因為移動裝置的螢幕都不是很寬,所以那些為桌面瀏覽器設計的網站放到移動裝置上顯示時,必然會因為移動裝置的 viewport 太窄,而擠作一團,甚至佈局什麼的都會亂掉。所以這些瀏覽器就決定預設情況下把 viewport 設為一個較寬的值,比如 980px,這樣的話即使是那些為桌面設計的網站也能在移動瀏覽器上正常顯示了。ppk 把這個瀏覽器預設的 viewport 叫做 layout viewport。

Visual viewport

layout viewport 的寬度是大於瀏覽器可視區域的寬度的,所以我們還需要一個 viewport 來代表瀏覽器可視區域的大小,ppk 把這個 viewport 叫做 visual viewport。

圖一:佈局擠在小小的螢幕中; 圖二:Layout viewport 和 Visual viewport

拿 iPhone 舉例。
iPhone 建立出了一個 980px 的虛擬視窗——佈局視窗(layout viewport)來對頁面佈局,這時傳統的桌面端網頁終於能正常佈局了(雖然要放大才能看清),但正是這個 layout viewport 導致專門根據螢幕尺寸和 devicePixelRatio 優化過的頁面也只能以縮放的方式顯示(可以想象在你的 PC 瀏覽器寬 980px 視窗裡開啟一個 320px 的頁面的情景…),那麼為了讓為移動裝置優化過的網頁正常顯示,就要改變這個 layout viewport。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

佈局視窗定義為:寬度為裝置寬度,初始縮放比例為 1 倍,禁止使用者縮放。

參考

ppk: A pixel is not a pixel is not a pixel

W3cplus 譯:此畫素非彼畫素

JeremyWei 譯:不是畫素的畫素不是畫素

移動前端開發之viewport的深入理解

移動端尺寸基礎知識

張鑫旭:裝置畫素比devicePixelRatio簡單介紹

SCREENSIZ.ES