前端：移動開發 - 像素、viewport

知識

CSS 像素、物理像素、PPI

CSS 像素

CSS 像素 是 Web 編程的概念，本質上是爲咱們 Web 開發者建立的一個抽象結構，是相對的而不是絕對的。

物理像素

物理像素 是物理概念，屏幕是由不少像素點組成的，各像素點經過發出不一樣顏色的光來呈現屏幕的色彩。它是物理的，隨着設備生產出來就已經被肯定下來了，好比 iPhone4 的屏幕分辨率爲 640×960，就表示屏幕的橫向有 640 個像素點，縱向有 960 個像素點。

PPI

PPI（Pixels Per Inch）表示單位面積上的物理像素點數目。分辨率能夠表示屏幕包含的像素數目，但要想描述屏幕的顯示質量，還須要知道屏幕尺寸，最後算出單位面積上的像素點數目。顯然 PPI 越高，屏幕顯示效果越細膩。

想要解釋 CSS 像素 和 物理像素 的關係也很簡單，想一想 PC 瀏覽器網頁上的縮放。若是用戶進行放大操做，一個擁有 width: 300px 的元素將會佔有屏幕愈來愈多的空間，以設備（物理）像素進行度量的話就會變得愈來愈寬。但對於 CSS 像素來講，不管怎樣，寬度的值仍是 300px，縮放效果是經過儘量的對 CSS 像素進行拉伸來實現的。

平時電腦屏幕的 1px CSS 像素對應 1px 物理像素，因此感受不到二者的區別，會讓你誤覺得CSS 裏的 px 就是實際屏幕像素。而真實狀況是：

• 當縮放比例爲 100% 時（不縮放），1px CSS 像素對應屏幕物理像素 1px；

• 當縮放比例大於 100% 時（放大），1px CSS 像素對應大於 1px 的屏幕物理像素；

• 當縮放比例小於 100% 時（縮小），1px CSS 像素對應小於 1px 的屏幕物理像素。

下來的兩幅圖說明了當用戶縮放的時候會發生什麼。第一幅圖展現的是當用戶進行縮小操做的時候設備像素（深藍色背景）和 CSS 像素（半透明前景）的樣子。CSS 像素變得小了；一個設備像素覆蓋了多個 CSS 像素。第二幅圖展現的當用戶進行放大操做時候設備像素和CSS像素的樣子。一個CSS 像素如今覆蓋了多個設備像素。（圖左：放大網頁，圖右：縮小網頁）

邏輯像素、設備像素比

過去 iPhone 3gs 分辨率是 320x480，和平時電腦屏幕同樣，1px CSS 像素對應 1px 物理像素，開發者開發網頁時只要寫上 CSS 像素 width:320px, height:480px 便可。可是，面對一樣屏幕尺寸的 iPhone 4/4s，分辨率提高到 640x960，難道要另外爲它寫一份網頁文檔設置 CSS 像素 width:640px, height:960px 來適配高分辨率嗎，顯然這是不實際的。若是繼續使用舊的網頁文件，在高分辨率的設備上，就會顯得很小，好比在分辨率爲 320×480 的 iPhone 3GS 上，要畫一條長度 1 英寸的線條，假設須要 163 個物理像素，即 CSS像素設成 163 像素便可；可是在分辨率爲 640×960 的 iPhone4/4s 上，163 個 CSS 像素所在手機表示實際長度只有 iPhone3GS 的一半，即 0.5 英寸。若是照這種方式顯示，3GS 上剛恰好的效果，在 4/4s 上就會小到根本看不清了。

可是在現實中，這兩臺手機顯示的效果倒是同樣的！這是由於 Retina 屏幕把 2x2 個像素當 1 個像素使用。好比本來 44 像素高的頂部導航欄，在 Retina 屏上用了 88 個像素的高度來顯示。以下圖：

邏輯像素

這裏提出邏輯像素的概念。蘋果使用了一套邏輯座標系統來解決多分辨率屏幕適配問題，
例如：4/4s 的邏輯像素設爲 320x480 points ，即物理屏幕上左上角爲原點，橫向爲 X 軸 320 points，縱向爲 Y 軸 480 points，名爲 point（即pt）單位就是上圖中的深灰色部分，顯然，PPI 越高的屏幕，1 point 覆蓋的物理像素就越多。Android 平臺也定義了邏輯像素單位，爲device-independent pixel 即 dip 或 dp。說實話，二者實際上是一回事。

設備像素比

設備像素比（devicePixelRatio）= 物理像素 / dp或pt。例如：
iPhone 4/4s 設備像素比：640 / 320 = 2

單位之間的換算關係：

1倍：1pt=1dp=1px（iPhone 3GS）
2倍：1pt=1dp=2px（iPhone 4s/5/6）
3倍：1pt=1dp=3px（iPhone 6 plus）

應用

CSS 和 圖片

對於開發者，實際應用中應該根據屏幕尺寸和 設備像素比（devicePixelRatio）來反推 CSS pixel。

也就是說：假設設備像素比爲 2，設計圖要作成了 720x1280 的，那麼 CSS 裏全部尺寸都除以 2 便可。

而對於圖片，好比一張實際大小 100x100px 的圖片，而且 width 和 height 都設了 100px（注意這裏的 px 是 css pixel），實際佔用了屏幕的像素數就是（假設設備像素比是 3）300x300px（注意這裏的 px 是真實的屏幕像素），也就是說，變模糊了。因此，若是但願網頁的元素在高 PPI 設備上顯示不模糊（好比 1080x1920 屏幕的手機），位圖應該作 3 倍的尺寸（好比作 300x300px 的圖，而後在 CSS 中設 width 和 height 爲 100px），svg（矢量圖）就無所謂了。

媒體查詢

注意這裏的 px 是指邏輯像素，即 CSS 文件中的 width、height。
max-width 和 max-device-width 均可以使用。

@media all and (max-device-width: 320px) {}

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