理解設備像素、設備獨立像素、css像素、viewport

時間 2019-11-30

標籤理解設備像素獨立 css viewport 欄目 CSS 简体版

原文原文鏈接

設備像素也叫物理像素。

設備像素指的是顯示器上的真實像素，每一個像素的大小是屏幕固有的屬性，屏幕出廠之後就不會改變了。
設備分辨率描述的就是這個顯示器的寬和高分別是多少個設備像素。
設備像素和設備分辨率交給操做系統來管理，瀏覽器不知道、也不須要知道設備分辨率的大小，瀏覽器只須要知道邏輯分辨率就能夠了。css

早期的移動設備，只有物理像素，沒有獨立像素，在不縮放的前提下，CSS 中的 1px 就表明着 1 個物理像素。好比 iphone3 的物理像素是 320 * 480，那麼 width: 320px; 的元素將會佔滿 iphone3 的屏幕寬度。html

設備獨立像素

從 iphone4 開始，蘋果公司便推出了所謂的 Retina 屏，物理像素變成 640 * 960，可是屏幕尺寸沒有變化，也就是說單位面積上的物理像素的數量增長了，或者說屏幕密度增長了。若是還按照原來那樣，1px CSS 像素由 1 個物理像素來渲染，那麼 width: 320px; 的元素只會佔據半個屏幕的寬度。原來在 iphone3 上可以佔滿屏的網頁，在 iphone4 上只會佔一半的屏幕，同時 font-size: 20px; 的字體在 iphone4 上的尺寸也會縮小。

爲了讓同一個網頁在 iphone4 和 iphone3 上的有相同的顯示效果，引入了獨立像素的概念。iphone4 的獨立像素爲 320 * 480，是 iphone4 的物理像素的一半，和 iphone3 的物理像素同樣。也就是說，iphone4 上的 1 個獨立像素 == 2 個物理像素。在 iphone4 上，在不縮放的前提下，CSS 中的 1px 便由 1 個獨立像素來渲染，至關於 2 個物理像素。這樣， width: 320px; 的元素由 320 個獨立像素來渲染，也就是由 640 個物理像素來渲染，正好佔滿 iphopn4 的屏幕寬度。 font-size: 20px; 的字體在 iphone3 和 iphone4 上的尺寸也相同，只不過在 iphone4 上的字體更清楚。

咱們已經知道，iphone4 上，1 個獨立像素 == 2 個物理像素，可是不是全部的設備上都這樣。下圖展現了不一樣型號的 iphone 的物理像素和獨立像素 (設備分辨率表明物理像素，邏輯分辨率表明獨立像素)。ios

css像素

在CSS中使用的 px都是指css像素，好比 width: 128px。css像素的大小是很容易變化的。 當咱們縮放頁面的時候，元素的css像素數量不會改變，改變的只是每一個css像素的大小。也就是說 width: 128px的元素在縮放200%之後，寬度依然是128個css像素，只不過 每一個css像素的寬度和高度變爲原來的兩倍。若是本來元素寬度爲128個 設備獨立像素，那麼縮放200%之後元素寬度爲256個設備獨立像素（css像素寬度始終是128）

在縮放比例爲100%的狀況下，一個css像素大小等於一個設備獨立像素。

爲了描述不一樣型號的手機物理像素和獨立像素之間的關係，引入了一個新的概念：設備像素比 devicePixelRatio。在 js 中經過 window.devicePixelRatio 查看。web

devicePixelRatio = 物理像素 / 獨立像素

iphone3: devicePixelRatio = 320 / 320 = 1
iphone4: devicePixelRatio = 640 / 320 = 2
iphone6Plus: devicePixelRatio = 1242 / 414 = 3

在 media 查詢中，resolution 就表明着 devicePixelRatio。瀏覽器

@media (min-resolution: 2dppx) { body { color: red; } }

上面的代碼表示，在 devicePixelRatio >= 2 的設備上，字體顏色爲紅色。app

當設備像素比爲1:1時，使用1（1×1）個設備像素顯示1個CSS像素；iphone

當設備像素比爲2:1時，使用4（2×2）個設備像素顯示1個CSS像素；字體

當設備像素比爲3:1時，使用9（3×3）個設備像素顯示1個CSS像素。網站

viewport

通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示咱們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也多是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在默認狀況下，通常來說，移動設備上的viewport都是要大於瀏覽器可視區域的，這是由於考慮到移動設備的分辨率相對於桌面電腦來講都比較小，因此爲了能在移動設備上正常顯示那些傳統的爲桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把本身默認的viewport設爲980px或1024px（ios設備爲980px，此處的px都爲設備獨立像素）ui

通常來講PC端端viewport跟瀏覽器的大小是一致的，移動端的viewport 寬度大多都是980px，可見移動端的viewport比真實的移動端屏幕大多

用innerWidth/innerHeight能夠查看頁面的viewport

在Chrome瀏覽器上設置一個模擬器，寬度（設備獨立像素）360px，這時候在控制檯分別打印出innerWidth 和outerWidth，截圖以下：

移動端viewport比其設備獨立像素寬度大許多

怎麼讓咱們看到整個頁面呢？瀏覽器渲染完頁面後，會按比例縮小，直到咱們在屏幕上能夠看到整個頁面：

在viewport上渲染頁面以後按比例縮小

能夠看到，字體變得超級超級小。

那怎麼讓一個設備獨立像素點對應一個CSS像素點呢，咱們不想要讓字變得過小啊！

<meta name="viewport" content="width=device-width, initial-scale=1">就是用來解決這個問題的。

width=device-width把viewport寬度設置稱爲設備的設備獨立像素寬度了。這時候一個CSS像素點就對應一個設備獨立像素點了！看一下效果：

width=device-width

這時候控制檯打印 innerWidth 和 outerWidth，會發現，他們已經同樣大了：

width=device-width

再說一下initial-scale=1，這個表達式表示頁面的原始縮放比例爲1。若是爲2，那麼頁面中元素會放大一倍。可是viewport大小不變。

樣例

設備爲iphone6

肯定的設備下，設備獨立像素和物理像素都不會變化，縮放的狀況下，變化的是css像素

下例中，不縮放的狀況下，375px（css像素）能夠填滿設備的寬度，縮放倍數爲375/980（375是iphone6的設備獨立像素寬度，980爲viewport的設備獨立像素寬度），假設此時要填滿設備寬度須要的css像素爲x，則 x*(375/980)=375,x=375/(375/980)=980

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <img src="./img/bdyd.jpg" width="980px">
</body>
<script>
   
</script>
</html>

若是設置了

則頁面沒有縮放，此時css像素等於設備獨立像素，填滿寬度須要的css像素爲375

再繼續設置圖片的寬度大於375，圖片顯示的效果不會變化，由於圖片雖然寬，可是仍是會縮放到一屏顯示

通常ui設計作標註的時候以設備像素比爲2的作標註(2倍屏的物理像素)，實際在設置css時要把標註的寬高/2（網頁縮放比爲100%狀況下）