像素和viewport的理解

物理像素、css像素

物理像素：屏幕中，實際上用來顯示圖像的像素，客觀存在的。

css像素：瀏覽器使用的抽象單位， 主要用來在網頁上繪製內容。

如今的手機屏幕有各類不一樣的分辨率，例如iphone5（1136x640）、iphone6（1344x750）、Samsung Galaxy S4（1920x1080）。物理像素值相同的元素在各個屏幕上的顯示就會有很大的差別。

下圖是寬高尺寸相同、分辨率爲2X2和4X4的屏幕。綠色爲物理像素分佈，紅色矩形爲1物理像素的元素。能夠發如今低分辨率下，紅色矩形面積比較大。

      

若是css像素和物理像素等價，即1css像素=1物理像素，則<div style="width=1px;height=1px"><div>的顯示狀況會如上圖，這樣是不可取的。爲了解決這種問題，設備獨立像素產生了。

設備獨立像素

各類屏幕中，它的寬或高包含某種像素的數目都相等。則繪製頁面內容時，以這種像素爲基礎單位，各類屏幕的顯示效果是否是都一致了。

這種神奇的像素就是設備獨立像素，是抽象的，實際上不存在。

 

              ，         

前兩圖：分辨率爲2X2的屏幕的物理像素和設備獨立像素分佈。後兩圖：分辨率爲4X4的屏幕的物理像素和設備獨立像素分佈。綠色爲物理像素，橙色爲設備獨立像素。

兩個屏幕的寬或高，擁有相等獨立像素數目的前提下，即便物理像素數目不一樣，1x1獨立像素表示的面積是同樣的。

可知物理像素和設備獨立像素的關係：物理像素=設備獨立像素x設備像素比   或     設備像素比=物理像素/設備獨立像素

手機類型	分辨率	物理像素	設備像素比	設備獨立像素
例1	2x2	2x2	1	2x2
例2	4x4	4x4	2	2x2

 

 

 

 

 

通常狀況下，設備獨立像素是針對屏幕的寬來講的。目前大部分手機屏幕寬的獨立像素數目爲320左右。

手機類型	分辨率	寬的物理像素	寬的設備像素比	寬的設備獨立像素值
iphone5	1136x640	640	2	320
iphone6	1344x750	750	2	375
iphone4	960x640	640	2	320

 

 

 

 

 

 

1單位設備獨立像素在各屏幕顯示效果夠差很少，由於各屏幕(大部分手機)的寬都是320的獨立像素。

那是否是1css像素等於1獨立像素呢？這樣，<div style="width=1px;height=1px"><div>就能適應各類分辨率了。

其實不是！！設備獨立像素數目=css像素數目x頁面縮放比例。

頁面縮放比例都爲100%時，可知1css像素等於1獨立像素，即1px=1dip。用戶對頁面進行縮放時，頁面縮放比例在變化，單位css像素表示的獨立像素的數目也在變化。

縮放比例是怎麼計算和產生的呢，這樣不得不提viewport了。

viewport

viewport是虛擬窗口，用於放置頁面。viewport能夠比屏幕的可見區域大。

 

在html頁面中添加元信息能夠設置viewport的初始大小，大小的單位爲獨立像素。例如：

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

該meta標籤的做用是讓當前viewport的寬度等於設備的寬度（也能夠填數值），同時不容許用戶手動縮放。也許允不容許用戶縮放不一樣的網站有不一樣的要求。若是不對viewport進行設置，就會給予一個默認值，通常是980，可是不必定。

頁面縮放時就是在調整viewport的區域大小，頁面縮放比例=調整前區域大小/調整後區域大小。區域裏面的頁面內容也會跟着縮放，這時每單位css像素對應的設備獨立像素數目也在變化。

總結

物理像素數目=設備獨立像素數目x設備像素比

　　　　　　=(css像素數目x頁面縮放比例)x設備像素比

　　　　　　=(css像素數目x(viewport調整前區域/調整後區域))x設備像素比