CSS像素、物理像素、邏輯像素、設備像素比、PPI、Viewport（轉載）

一、PX(CSS pixels)

1.1 定義

虛擬像素，能夠理解爲「直覺」像素，CSS和JS使用的抽象單位，瀏覽器內的一切長度都是以CSS像素爲單位的，CSS像素的單位是px。

1.2 注意

在CSS規範中，長度單位能夠分爲兩類，絕對(absolute)單位以及相對(relative)單位。px是一個相對單位，相對的是設備像素(device pixel)。

在一樣一個設備上，每1個CSS像素所表明的物理像素是能夠變化的(即CSS像素的第一方面的相對性); 

在不一樣的設備之間，每1個CSS像素所表明的物理像素是能夠變化的(即CSS像素的第二方面的相對性);

1.3 那麼PX究竟是什麼？

px實際是pixel（像素）的縮寫，根據 維基百科的解釋，它是圖像顯示的基本單元，既不是一個肯定的物理量，也不是一個點或者小方塊，而是一個抽象概念。因此在談論像素時必定要清楚它的上下文！必定要清楚它的上下文！必定要清楚它的上下文！

不一樣的設備，圖像基本採樣單元是不一樣的，顯示器上的物理像素等於顯示器的點距，而打印機的物理像素等於打印機的墨點。而衡量點距大小和打印機墨點大小的單位分別稱爲ppi和dpi：

ppi：每英寸多少像素數，放到顯示器上說的是每英寸多少物理像素及顯示器設備的點距。

dpi：每英寸多少點。

關於打印機的點距咱們不去關心，只要知道 當用於描述顯示器設備時ppi與dpi是同一個概念 。

1.4 CSS像素的真正含義

因爲不一樣的物理設備的物理像素的大小是不同的，因此css認爲瀏覽器應該對css中的像素進行調節，使得瀏覽器中 1css像素的大小在不一樣物理設備上看上去大小老是差很少 ，目的是爲了保證閱讀體驗一致。爲了達到這一點瀏覽器能夠直接按照設備的物理像素大小進行換算，而css規範中使用**"參考像素"**來進行換算。

1參考像素即爲從一臂之遙看解析度爲96DPI的設備輸出（即1英寸96點）時，1點（即1/96英寸）的視角。它並非1/96英寸長度，而是從一臂之遙的距離處看解析度爲96DPI的設備輸出一單位（即1/96英寸）時視線與水平線的夾角。一般認爲常人臂長爲28英寸，因此它的視角是:
(1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

因爲css像素是一個視角單位，因此在真正實現時，爲了方便基本都是根據設備像素換算的。瀏覽器根據硬件設備可以直接獲取css像素

1.5 舉個栗子來理解css像素的相對性

做爲Web開發者，咱們接觸的更多的是用於控制元素樣式的樣式單位像素。這裏的像素咱們稱之爲CSS像素。

CSS像素有什麼特別的地方？咱們能夠借用quirksmode中的這個例子：

假設咱們用PC瀏覽器打開一個頁面，瀏覽器此時的寬度爲800px，頁面上同時有一個400px寬的塊級元素容器。很明顯此時塊狀容器應該佔頁面的一半。

但若是咱們把頁面放大（經過「Ctrl鍵」加上「+號鍵」），放大爲200%，也就是原來的兩倍。此時塊狀容器則橫向佔滿了整個瀏覽器。

弔詭的是此時咱們既沒有調整瀏覽器窗口大小，也沒有改變塊狀元素的css寬度，可是它看上去卻變大了一倍——這是由於咱們把CSS像素放大爲了原來的兩倍。

CSS像素與屏幕像素1：1一樣大小時：

CSS像素(黑色邊框)開始被拉伸，此時1個CSS像素大於1個屏幕像素

也就是說默認狀況下一個CSS像素應該是等於一個物理像素的寬度的，可是瀏覽器的放大操做讓一個CSS像素等於了兩個設備像素寬度。在後面你會看到更復雜的狀況，在高PPI的設備上，CSS像素甚至在默認狀態下就至關於多個物理像素的尺寸。

從上面的例子能夠看出，CSS像素歷來都只是一個相對值。

二、DP(device pixels)

2.1 定義

設備像素（物理像素），顧名思義，顯示屏是由一個個物理像素點組成的，經過控制每一個像素點的顏色，使屏幕顯示出不一樣的圖像，屏幕從工廠出來那天起，它上面的物理像素點就固定不變了，單位pt。

2.2 注意

pt在css單位中屬於真正的絕對單位，1pt = 1/72(inch),inch及英寸，而1英寸等於2.54釐米。

不一樣的設備，其圖像基本單位是不一樣的，好比顯示器的點距，能夠認爲是顯示器的物理像素。如今的液晶顯示器的點距通常在0.25mm到0.29mm之間。而打印機的墨點，也能夠認爲是打印機的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。

注意，咱們一般所說的顯示器分辨率，實際上是指桌面設定的分辨率，而不是顯示器的物理分辨率。只不過如今液晶顯示器成爲主流，因爲液晶的顯示原理與CRT不一樣，只有在桌面分辨率與物理分辨率一致的狀況下，顯示效果最佳，因此如今咱們的桌面分辨率幾乎老是與顯示器的物理分辨率一致了。

2.3 小知識

小知識:屏幕廣泛採用RGB色域(紅、綠、藍三個子像素構成),而印刷行業廣泛使用CMYK色域(青、品紅、黃和黑)

2.4 設備像素(DP)與CSS像素之間的關係

得到設備像素比（dpr）後，即可得知設備像素與CSS像素之間的比例。當這個比率爲1:1時，使用1個設備像素顯示1個CSS像素。當這個比率爲2:1時，使用4個設備像素顯示1個CSS像素，當這個比率爲3:1時，使用9（3*3）個設備像素顯示1個CSS像素。
因此，有以下公式：

DPR = 設備像素/CSS像素

三、DIP(Device independent Pixel)

設備獨立像素，也稱爲邏輯像素，簡稱dip。
根據上述設備像素與CSS像素之間的關係、及DPR的官方定義，咱們能夠推斷出：

CSS像素 =設備獨立像素 = 邏輯像素

下面，仍是引用 http://www.cnblogs.com/2050/p/3877280.html 文中的內容說明：

在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的定義爲：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨立像素。
CSS像素就能夠看作是設備的獨立像素，因此經過devicePixelRatio，咱們能夠知道該設備上一個css像素表明多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值爲2，也就是說1個css像素至關於2個物理像素。可是要注意的是，devicePixelRato在不一樣的瀏覽器中還存在些許的兼容性問題，因此咱們如今還並不能徹底信賴這個東西，具體的狀況能夠看下這篇文章。

爲何是「每四個一組」？並且要讓這四個一組來顯示「原來屏幕的一個像素」？這大概就是 Retina 顯示技術的一種表現吧。而這「每四個一組」的「大像素」，能夠被稱做「設備獨立像素」，device independent pixel，或者 density-independentpixel ，它能夠是系統中的一個點，這個點表明一個能夠由程序使用的虛擬像素，而後由相關係統轉換爲物理像素。

「設備獨立像素」也有人稱爲「CSS像素」，一種形象的說法，更傾向於代表與 CSS 中尺寸的對應。

設備獨立像素與物理像素的對應關係，能夠這樣看：

相似的每四個一組的對應關係，也許正是 Retina 顯示技術所作的。

四、DPR(device pixels ratio)

4.1 定義

設備像素比（dpr 描述的是未縮放狀態下，物理像素和CSS像素的初始比例關係，計算方法以下圖。

4.2 理解

設備像素比(dpr) 是指在移動開發中1個css像素佔用多少設備像素，如2表明1個css像素用2x2個設備像素來繪製。

設備像素比(dpr)，公式爲1px = (dpr)^2 * 1dp，能夠理解爲1px由多少個設備像素組成；

五、PPI(pixels per inch)

5.1 定義

每英寸像素取值，更確切的說法應該是像素密度，也就是衡量單位物理面積內擁有像素值的狀況。

5.2 ppi是如何計算出來的呢？

顧名思義，每英寸的像素點（設備像素），已知屏幕分辨率和主對角線的尺寸，則ppi等於
以愛瘋6爲例：

var 斜邊尺寸 = V(1920^2+1080^2) V表明開根號 
var ppi = 斜邊尺寸/5.5 
ppi = 401ppi

咱們知道，ppi越高，每英寸像素點越多，圖像越清晰；咱們能夠類比物體的密度，密度越大，單位體積的質量就越大，ppi越高，單位面積的像素越多。

5.3 ppi和dpr到底什麼關係？

畢竟這些參數是外國人先發明的，他們會優先選擇本身熟悉的計量單位做爲顯示設備的工廠標準參數，所以ppi就用做顯示設備的工業標準；

告訴業界人士，ppi達到多少是高清屏，此時對應的dpr是多少，而不直接告訴你我如今的顯示設備dpr是多少，畢竟人們直接聽到像素分辨率會更加有反應。

設備像素比與ppi相關，通常是ppi/160的整數倍：

六、倍率與邏輯像素

6.1 基本關係

用iPhone 3gs和4s來舉例。假設有個郵件列表界面，咱們不妨按照PC端網頁設計的思惟來想象。3gs上大概只能顯示4-5行，4s就能顯示9-10行，並且每行會變得特別寬。但兩款手機實際上是同樣大的。若是照這種方式顯示，3gs上剛恰好的效果，在4s上就會小到根本看不清字。

在現實中，這二者效果倒是同樣的。這是由於Retina屏幕把2x2個像素當1個像素使用。好比本來44像素高的頂部導航欄，在Retina屏上用了88個像素的高度來顯示。致使界面元素都變成2倍大小，反而和3gs效果同樣了。畫質卻更清晰。

在之前，iOS應用的資源圖片中，同一張圖一般有兩個尺寸。你會看到文件名有的帶@2x字樣，有的不帶。其中不帶@2x的用在普通屏上，帶@2x的用在Retina屏上。只要圖片準備好，iOS會本身判斷用哪張，Android道理也同樣。

由此能夠看出，蘋果以普通屏爲基準，給Retina屏定義了一個2倍的倍率（iPhone 6plus除外，它達到了3倍）。實際像素除以倍率，就獲得邏輯像素尺寸。只要兩個屏幕邏輯像素相同，它們的顯示效果就是相同的。

6.2 Retina顯示屏

這是一種顯示技術，能夠將把更多的像素點壓縮至一塊屏幕裏，從而達到更高的分辨率並提升屏幕顯示的細膩程度，這種分辨率在正常觀看距離下足以令人肉眼沒法分辨其中的單獨像素。

最早使用retina屏幕是iphone 4，屏幕分辨率爲960 * 640（326ppi）。

對好比下兩幅圖，能夠清晰地看出是否 Retina 屏的顯示差別：

圖2 iPhone 3GS

圖3 iPhone 4

兩代iPhone 的物理尺寸（屏幕寬高有多少英寸）是同樣的，從上圖能夠看出，iphone 4的顯示效果要明顯好於iphone 3GS，雖然 iPhone 4 分辨率提升了，但它不一樣於普通的電腦顯示器那樣爲了顯示更多的內容，而是提高顯示相同內容時的畫面精細程度。這種提高方式是靠提高單位面積屏幕的像素數量，即像素密度來提高分辨率，這樣作的主要目的是爲了提升屏幕顯示畫面的精細程度。以第三代 MacBook Pro with Retina Display爲例， 工做時顯卡渲染出的2880x1880個像素每四個一組，輸出原來屏幕的一個像素顯示的大小區域內的圖像。這樣一來，用戶所看到的圖標與文字的大小與原來的1440x900分辨率顯示屏相同，但精細度是原來的4倍。

注意：在桌面顯示器中，咱們調整了顯示分辨率，好比從 800 * 600 調整到 1024 * 768 時，屏幕的文字圖標會變小，顯示的內容更多了。但 Retina 顯示方式不會產生這樣的問題，或者說， Retina 顯示技術解決的是顯示畫面精細程度的問題，而不是解決顯示內容容量的問題。

七、分辨率、像素和屏幕尺寸

PPI 說的是像素密度，而分辨率說的是塊屏幕的像素尺寸，譬如說 1334*750 就是 iPhone（6~7）的分辨率，說 iPhone（6~7）的分辨率是 326 是錯誤的表述，326 是它的像素密度，單位是 PPI。

詢問別人一粒像素有多大是一個很是雞賊的問題（當心面試遇到這樣的題），雖然咱們說像素是構成屏幕的發光的點，是物理的，可是像素在脫離了屏幕尺寸以後是沒有大小可言的，你能夠將 1920 * 1080 顆像素放到一臺 40 寸的小米電視機裏面，也能夠將一樣多的像素所有塞到一臺 5.5 寸的 iPhone7 Plus 手機裏面去，那麼對於 40 寸的電視而言，每一個像素顆粒固然會大於 5.5 寸的手機的像素。

因此光看屏幕的分辨率對於設計師來講是不具有多少實際意義的，經過分辨率計算得出的像素密度（PPI）纔是設計師要關心的問題，咱們經過屏幕分辨率和屏幕尺寸就能計算出屏幕的像素密度的。

再次使用 iPhone（6~7）做爲例子。咱們知道該屏幕的橫向物理尺寸爲 2.3 英寸 ，且橫向具備 750 顆像素，根據下面的公式，咱們可以算出 iPhone（6~7）的屏幕是 326 PPI，意爲每寸存在 326 顆像素。

其實不論咱們怎麼除，計算得出來的像素密度（PPI）都會是這個數，寬存在像素除以寬物理長度，高存在像素除以高物理長度，得數都接近於 326。

八、Viewport

8.1 PPK的關於三個viewport的理論

ppk大神對於移動設備上的viewport有着很是多的研究（第一篇，第二篇，第三篇），有興趣的同窗能夠去看一下，本文中有不少數據和觀點也是出自那裏。ppk認爲，移動設備上有三個viewport。

首先，移動設備上的瀏覽器認爲本身必須能讓全部的網站都正常顯示，即便是那些不是爲移動設備設計的網站。但若是以瀏覽器的可視區域做爲viewport的話，由於移動設備的屏幕都不是很寬，因此那些爲桌面瀏覽器設計的網站放到移動設備上顯示時，必然會由於移動設備的viewport太窄，而擠做一團，甚至佈局什麼的都會亂掉。也許有人會問，如今不是有不少手機分辨率都很是大嗎，好比768x1024，或者1080x1920這樣，那這樣的手機用來顯示爲桌面瀏覽器設計的網站是沒問題的吧？前面咱們已經說了，css中的1px並非表明屏幕上的1px，你分辨率越大，css中1px表明的物理像素就越多，devicePixelRatio的值也越大，這很好理解，由於你分辨率增大了，但屏幕尺寸並無變大多少，必須讓css中的1px表明更多的物理像素，才能讓1px的東西在屏幕上的大小與那些低分辨率的設備差很少，否則就會由於過小而看不清。因此在1080x1920這樣的設備上，在默認狀況下，也許你只要把一個div的寬度設爲300多px（視devicePixelRatio的值而定），就是滿屏的寬度了。回到正題上來，若是把移動設備上瀏覽器的可視區域設爲viewport的話，某些網站就會由於viewport太窄而顯示錯亂，因此這些瀏覽器就決定默認狀況下把viewport設爲一個較寬的值，好比980px，這樣的話即便是那些爲桌面設計的網站也能在移動瀏覽器上正常顯示了。ppk把這個瀏覽器默認的viewport叫作 layout viewport。
   
這個layout viewport的寬度能夠經過document.documentElement.clientWidth 來獲取。

然而，layout viewport 的寬度是大於瀏覽器可視區域的寬度的，因此咱們還須要一個viewport來表明 瀏覽器可視區域的大小，ppk把這個viewport叫作 visual viewport 。visual viewport的寬度能夠經過window.innerWidth 來獲取，但在Android 2, Oprea mini 和 UC 8中沒法正確獲取。

如今咱們已經有兩個viewport了：layout viewport 和  visual viewport。但瀏覽器以爲還不夠，由於如今愈來愈多的網站都會爲移動設備進行單獨的設計，因此必須還要有一個能完美適配移動設備的viewport。所謂的完美適配指的是，首先不須要用戶縮放和橫向滾動條就能正常的查看網站的全部內容；第二，顯示的文字的大小是合適，好比一段14px大小的文字，不會由於在一個高密度像素的屏幕裏顯示得過小而沒法看清，理想的狀況是這段14px的文字不管是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差很少的。固然，不僅是文字，其餘元素像圖片什麼的也是這個道理。ppk把這個viewport叫作 ideal viewport，也就是第三個viewport——移動設備的理想viewport。

ideal viewport並無一個固定的尺寸，不一樣的設備擁有有不一樣的ideal viewport。全部的iphone的ideal viewport寬度都是320px，不管它的屏幕寬度是320仍是640，也就是說，在iphone中，css中的320px就表明iphone屏幕的寬度。

可是安卓設備就比較複雜了，有320px的，有360px的，有384px的等等，關於不一樣的設備ideal viewport的寬度都爲多少，能夠到http://viewportsizes.com去查看一下，裏面收集了衆多設備的理想寬度。

再總結一下：ppk把移動設備上的viewport分爲 layout viewport 、 visual viewport 和 ideal viewport 三類，其中的ideal viewport是最適合移動設備的viewport，ideal viewport的寬度等於移動設備的屏幕寬度，只要在css中把某一元素的寬度設爲ideal viewport的寬度(單位用px)，那麼這個元素的寬度就是設備屏幕的寬度了，也就是寬度爲100%的效果。ideal viewport 的意義在於，不管在何種分辨率的屏幕下，那些針對ideal viewport而設計的網站，不須要用戶手動縮放，也不須要出現橫向滾動條，均可以完美的呈現給用戶。

 

8.2 利用meta標籤對viewport進行控制

移動設備默認的viewport是layout viewport，也就是那個比屏幕要寬的viewport，但在進行移動設備網站的開發時，咱們須要的是ideal viewport。那麼怎麼才能獲得ideal viewport呢？這就該輪到meta標籤出場了。

咱們在開發移動設備的網站時，最多見的的一個動做就是把下面這個東西複製到咱們的head標籤中：

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

該meta標籤的做用是讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。也許允不容許用戶縮放不一樣的網站有不一樣的要求，但讓viewport的寬度等於設備的寬度，這個應該是你們都想要的效果，若是你不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現橫向滾動條。

這個name爲viewport的meta標籤到底有哪些東西呢，又都有什麼做用呢？

meta viewport 標籤首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實也證實這個東西仍是很是有用的。

在蘋果的規範中，meta viewport 有6個屬性(暫且把content中的那些東西稱爲一個個屬性和值)，以下：

這些屬性能夠同時使用，也能夠單獨使用或混合使用，多個屬性同時使用時用逗號隔開就好了。

此外，在安卓中還支持  target-densitydpi  這個私有屬性，它表示目標設備的密度等級，做用是決定css中的1px表明多少物理像素

特別說明的是，當 target-densitydpi=device-dpi 時， css中的1px會等於物理像素中的1px。

由於這個屬性只有安卓支持，而且安卓已經決定要廢棄<strike>target-densitydpi</strike>  這個屬性了，因此這個屬性咱們要避免進行使用  。

8.3 把當前的viewport寬度設置爲 ideal viewport 的寬度

要獲得ideal viewport就必須把默認的layout viewport的寬度設爲移動設備的屏幕寬度。由於meta viewport中的width能控制layout viewport的寬度，因此咱們只須要把width設爲width-device這個特殊的值就好了。

<meta name="viewport" content="width=device-width">

下圖是這句代碼在各大移動端瀏覽器上的測試結果：

能夠看到經過width=device-width，全部瀏覽器都能把當前的viewport寬度變成ideal viewport的寬度，但要注意的是，在iphone和ipad上，不管是豎屏仍是橫屏，寬度都是豎屏時ideal viewport的寬度。

這樣的寫法看起來誰都會作，沒吃過豬肉，誰還沒見過豬跑啊~，確實，咱們在開發移動設備上的網頁時，無論你明不明白什麼是viewport，可能你只須要這麼一句代碼就夠了。

但是你確定不知道

<meta name="viewport" content="initial-scale=1">

這句代碼也能達到和前一句代碼同樣的效果，也能夠把當前的的viewport變爲 ideal viewport。

呵呵，傻眼了吧，由於從理論上來說，這句代碼的做用只是不對當前的頁面進行縮放，也就是頁面本該是多大就是多大。那爲何會有 width=device-width 的效果呢？

要想清楚這件事情，首先你得弄明白這個縮放是相對於什麼來縮放的，由於這裏的縮放值是1，也就是沒縮放，但卻達到了 ideal viewport 的效果，因此，那答案就只有一個了，縮放是相對於 ideal viewport來進行縮放的，當對ideal viewport進行100%的縮放，也就是縮放值爲1的時候，不就獲得了 ideal viewport 嗎？事實證實，的確是這樣的。下圖是各大移動端的瀏覽器當設置了<meta name="viewport" content="initial-scale=1">後是否能把當前的viewport 寬度變成 ideal viewport 的寬度的測試結果。

測試結果代表 initial-scale=1 也能把當前的 viewport 寬度變成 ideal viewport 的寬度，但此次輪到了windows phone 上的IE 不管是豎屏仍是橫屏都把寬度設爲豎屏時 ideal viewport 的寬度。但這點小瑕疵已經可有可無了。

但若是 width 和 initial-scale=1 同時出現，而且還出現了衝突呢？好比：

<meta name="viewport" content="width=400, initial-scale=1">

width=400 表示把當前 viewport 的寬度設爲400px，initial-scale=1 則表示把當前 viewport 的寬度設爲ideal viewport的寬度，那麼瀏覽器到底該服從哪一個命令呢？是書寫順序在後面的那個嗎？不是。當遇到這種狀況時，瀏覽器會取它們兩個中較大的那個值。例如，當width=400，ideal viewport 的寬度爲320時，取的是400；當width=400， ideal viewport的寬度爲480時，取的是ideal viewport的寬度。（ps:在uc9瀏覽器中，當initial-scale=1時，不管width屬性的值爲多少，此時viewport的寬度永遠都是ideal viewport的寬度）

最後，總結一下，要把當前的viewport寬度設爲ideal viewport的寬度，既能夠設置 width=device-width，也能夠設置 initial-scale=1，但這二者各有一個小缺陷，就是iphone、ipad以及IE 會橫豎屏不分，統統以豎屏的ideal viewport寬度爲準。因此，最完美的寫法應該是，二者都寫上去，這樣就 initial-scale=1 解決了 iphone、ipad的毛病，width=device-width則解決了IE的毛病：

<meta name="viewport" content="width=device-width, initial-scale=1">

8.4 關於meta viewport的更多知識

8.4.1 關於縮放以及initial-scale的默認值

首先咱們先來討論一下縮放的問題，前面已經提到過，縮放是相對於 ideal viewport 縮放的，縮放值越大，當前viewport的寬度就會越小，反之亦然。例如在iphone中，ideal viewport 的寬度是320px，若是咱們設置 initial-scale=2 ，此時 viewport 的寬度會變爲只有160px了，這也好理解，放大了一倍嘛，就是原來1px的東西變成2px了，可是1px變爲2px並非把原來的320px變爲640px了，而是在實際寬度不變的狀況下，1px變得跟原來的2px的長度同樣了，因此放大2倍後原來須要320px才能填滿的寬度如今只須要160px就作到了。所以，咱們能夠得出一個公式：

visual viewport寬度 = ideal viewport寬度 / 當前縮放值

當前縮放值 = ideal viewport寬度 / visual viewport寬度

ps: visual viewport 的寬度指的是瀏覽器可視區域的寬度。

大多數瀏覽器都符合這個理論，可是安卓上的原生瀏覽器以及IE有些問題。安卓自帶的webkit瀏覽器只有在 initial-scale = 1 以及沒有設置width屬性時纔是表現正常的，也就至關於這理論在它身上基本沒用；而IE則根本不甩initial-scale這個屬性，不管你給他設置什麼，initial-scale表現出來的效果永遠是1。

好了，如今再來講下 initial-scale 的默認值問題，就是不寫這個屬性的時候，它的默認值會是多少呢？很顯然不會是1，由於當 initial-scale = 1 時，當前的 layout viewport 寬度會被設爲 ideal viewport 的寬度，但前面說了，各瀏覽器默認的 layout viewport 寬度通常都是980啊，1024啊，800啊等等這些個值，沒有一開始就是 ideal viewport 的寬度的，因此 initial-scale 的默認值確定不是1。安卓設備上的 initial-scale 默認值好像沒有方法可以獲得，或者就是乾脆它就沒有默認值，必定要你顯示的寫出來這個東西纔會起做用，咱們無論它了，這裏咱們重點說一下iphone和ipad上的 initial-scale 默認值。

根據測試，咱們能夠在iphone和ipad上獲得一個結論，就是不管你給 layout viewpor 設置的寬度是多少，而又沒有指定初始的縮放值的話，那麼iphone和ipad會自動計算 initial-scale 這個值，以保證當前 layout viewport 的寬度在縮放後就是瀏覽器可視區域的寬度，也就是說不會出現橫向滾動條。好比說，在iphone上，咱們不設置任何的 viewport meta 標籤，此時 layout viewport 的寬度爲980px，但咱們能夠看到瀏覽器並無出現橫向滾動條，瀏覽器默認的把頁面縮小了。根據上面的公式，當前縮放值 = ideal viewport寬度 / visual viewport寬度，咱們能夠得出：

當前縮放值 = 320 / 980

也就是當前的 initial-scale 默認值應該是 0.33這樣子。當你指定了 initial-scale 的值後，這個默認值就不起做用了。

總之記住這個結論就好了：在iphone和ipad上，不管你給viewport設的寬的是多少，若是沒有指定默認的縮放值，則iphone和ipad會自動計算這個縮放值，以達到當前頁面不會出現橫向滾動條(或者說viewport的寬度就是屏幕的寬度)的目的。

8.4.2 動態改變meta viewport標籤

第一種方法

可使用 document.write 來動態輸出 meta viewport 標籤，例如：

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

第二種方法

經過 setAttribute 來改變

<meta id="testViewport" name="viewport" content="width = 380"> <script> var mvp = document.getElementById('testViewport'); mvp.setAttribute('content','width=480'); </script>

安卓2.3自帶瀏覽器上的一個 bug

<meta name="viewport" content="width=device-width"> <script type="text/javascript"> alert(document.documentElement.clientWidth); //彈出600，正常狀況應該彈出320 </script> <meta name="viewport" content="width=600"> <script type="text/javascript"> alert(document.documentElement.clientWidth); //彈出320，正常狀況應該彈出600 </script>

測試的手機 ideal viewport 寬度爲320px，第一次彈出的值是600,但這個值應該是第行meta標籤的結果啊，而後第二次彈出的值是320，這纔是第一行meta標籤所達到的效果啊，因此在安卓2.3(或許是全部2.x版本中)的自帶瀏覽器中，對 meta viewport 標籤進行覆蓋或更改，會出現讓人很是迷糊的結果。

最後咱們來看一個栗子來加深上面概念的印象：

一隻筆的像素以下：

這隻筆在屏幕c,d,e下的顯示效果以下：

看到同一張圖片在各屏幕顯示大小不一。
咱們但願不一樣屏幕顯示圖片的大小要一致。
咱們要計算圖片縮放比例。
計算公式：
(圖片邏輯像素大小px1) / (圖片縮放後實際像素大小px2) = (設備像素dp) / (設備獨立像素dips)
px2 = px1 * (dp / dips)
px2 = px1 * dpr
此時，這隻筆在屏幕c,d,e下的顯示效果以下：

經過上面的咱們能夠看到，不一樣的 DPR (設備像素比)要想顯示大小同樣，必須準備三張不一樣分辨率的圖片，那麼，我想一張圖片就在三種不一樣的屏幕下顯示同樣的大小，能作到嗎？固然能作到，這就須要縮放了，要本身計算縮放多麻煩，那有沒有一種簡單的方式呢？固然有，那就是你在熟悉不過的px,你會發現設置圖片寬度爲50px之後，在各個移動終端的大小看起來都同樣，這是什麼緣由呢。

按照 CSS 規範的定義，CSS 中的 px 是一個相對長度，它相對的，是 viewing device 的分辨率。這個viewing device，一般就是電腦顯示器。典型的電腦顯示器的分辨率是96DPI，也就是1像素爲1/96英寸（實際上，假設咱們的顯示器分辨率都與物理分辨率一致，而液晶點距實際上是0.25mm到0.29mm之間，因此不太多是正好1/96英寸，而只是接近）。

通常來講，px 就是對應設備的物理像素，然而若是輸出設備的解析度與電腦顯示器大不相同，輸出效果就會有問題。例如打印機輸出到紙張上，其解析度比電腦屏幕要高許多，若是不縮放，直接使用設備的物理像素，那電腦上的照片由 600DPI 的打印機打出來就比用顯示器看小了約6倍。

因此 CSS 規定，在這種狀況下，瀏覽器應該對像素值進行縮放調節，以保持閱讀體驗的大致一致。也就是要保持必定像素的長度在不一樣設備輸出上看上去的大小老是差很少。

怎樣確保這一點呢？直接按照設備物理像素的大小進行換算固然是一個方式，可是CSS考慮得更多，它建議，轉換應按照「參考像素」（reference pixel）來進行。

眼睛看到的大小，取決於可視角度。而可視角度取決於物體的實際大小以及物體與眼睛的距離。10米遠處一個1米見方的東西，與1米遠處的10釐米見方的東西，看上去的大小差很少是同樣的，所謂一葉障目不見泰山，講的就是這個常識。

所以CSS規範使用視角來定義「參考像素」，1參考像素即爲從一臂之遙看解析度爲96DPI的設備輸出（即1英寸96點）時，1點（即1/96英寸）的視角。

請注意這個差異——CSS規範定義的參考像素並非1/96英寸，而是1/96英寸在一臂之遙的看起來的視角。一般認爲常人臂長爲28英寸，因此其視角能夠計算出來是0.0213度。（即(1/96)in / (28in * 2 * PI / 360deg) ）

咱們在使用不一樣設備輸出時，眼睛與設備輸出的典型距離是不一樣的。好比電腦顯示器，一般是一臂之距，而看書和紙張時（對應於打印機的設備輸出），則一般會更近一些。看電視時則會更遠，好比通常建議是電視機屏幕對角線的2.5到3倍長——若是你是個42'彩電，那就差很少是3米遠。看電影的話……我就不知道多遠了，您本身量吧。

所以，1參考像素：
對於電腦顯示器是0.26mm（即1/96英寸）；
對於激光打印機是0.20mm（假設閱讀距離一般爲55cm，即21英寸）；

而換算時，對於300DPI的打印機（即每一個點是1/300英寸），1px一般會四捨五入到3dots，也就是0.25mm左右；而對於600DPI的打印機，則可能四捨五入到5dots，也就是0.21mm。

上圖中，左邊的屏幕（能夠認爲是電腦屏幕）的典型視覺距離是71釐米即28英寸，其1px對應了0.28mm；
而右邊的屏幕（能夠認爲是你的42寸高清電視）的典型視覺距離是3.5米即120英寸，其1px對應1.3mm。42寸的1080p電視，分辨率是1920*1080，則其物理像素只有0.5mm左右，可見確實是高清哦。

綜上，px 是一個相對單位，並且在特定設備上老是一個近似值（原則是儘可能接近參考像素）。

然而，若是你把絕對單位理解爲對輸出效果的絕對掌控，事情卻截然不同。就網頁輸出的最主要對象——電腦屏幕來講，px 可被視爲一個基準單位——與桌面分辨率一致，若是是液晶屏，則幾乎老是與液晶屏物理分辨率一致——也就是說網頁設計者設定的1px，就是「最終看到這個網頁的用戶的顯示器上的1個點距」！反卻是那些絕對單位，其實一點也不絕對。

參考文章

深刻理解移動端像素知識與Viewport知識
移動端H5頁面的設計稿尺寸（上）
移動端H5頁面的設計稿尺寸（下）
你真的瞭解像素嗎
移動前端開發之viewport的深刻理解
設備像素，設備獨立像素，CSS像素
移動端開發系列——像素與viewport
移動端高清、多屏適配方案 
像素（px）究竟是個什麼單位
CSS 長度單位
完全理解 UI 及 Web 的尺寸單位：基本概念
針對iPhone的pt、Android的dp、HTML的css像素與dpr、設計尺寸和物理像素的淺分析