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

QLQ 發布于2019-08-29 10:58 / 1700人閱讀

摘要：表示單位面積上的物理像素點數目。比如原本像素高的頂部導航欄，在屏上用了個像素的高度來顯示。參考譯此像素非彼像素譯不是像素的像素不是像素移動前端開發之的深入理解移動端尺寸基礎知識張鑫旭設備像素比簡單介紹

知識 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。

布局窗口定義為：寬度為設備寬度，初始縮放比例為 1 倍，禁止用戶縮放。

參考

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

W3cplus 譯：此像素非彼像素

JeremyWei 譯：不是像素的像素不是像素

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

移動端尺寸基礎知識

張鑫旭：設備像素比devicePixelRatio簡單介紹

SCREENSIZ.ES

云服務器 GPU云服務器前端移動開發移動前端開發移動前端開發教程移動前端開發框架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111341.html

Web移動開發基本概念

摘要：移動客戶端的開發類型原生，也就是完全使用移動設備系統語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗到的交互都是原生的。前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網頁界面，甚至PC/MAC 桌面端軟件界面；現在最常見的說法一般是指Web前端，也就是針對于網頁端開發的工作。 Web App就是以瀏覽器作為客戶端...

vvpale 2019-08-19 17:36 評論0 收藏0
Web移動開發基本概念

摘要：移動客戶端的開發類型原生，也就是完全使用移動設備系統語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗到的交互都是原生的。前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網頁界面，甚至PC/MAC 桌面端軟件界面；現在最常見的說法一般是指Web前端，也就是針對于網頁端開發的工作。 Web App就是以瀏覽器作為客戶端...

ivan_qhz 2019-08-30 12:45 評論0 收藏0
Web移動開發基本概念

摘要：移動客戶端的開發類型原生，也就是完全使用移動設備系統語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗到的交互都是原生的。前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網頁界面，甚至PC/MAC 桌面端軟件界面；現在最常見的說法一般是指Web前端，也就是針對于網頁端開發的工作。 Web App就是以瀏覽器作為客戶端...

xiaoqibTn 2019-08-01 15:04 評論0 收藏0
茴字的四種寫法—移動適配方案的進化

摘要：是阿里團隊開發的前端適配方案，也是用的的方法。那么第一種方法其實已經能解決前端適配問題了，為什么阿里還要開發一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

canger 2019-08-22 16:12 評論0 收藏0
茴字的四種寫法—移動適配方案的進化

摘要：是阿里團隊開發的前端適配方案，也是用的的方法。那么第一種方法其實已經能解決前端適配問題了，為什么阿里還要開發一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

Pocher 2019-08-02 10:10 評論0 收藏0