最近看了很多這方面的文章，能搜到的基本看了個遍，但感覺還是似懂非懂，知道這個東西，很難說出這是個什麼東西，先整理一些概念，慢慢消化，以後慢慢探索其中的原因。

1、PX(CSS pixels)

1.1 定義

虛擬畫素，可以理解為“直覺”畫素，CSS和JS使用的抽象單位，瀏覽器內的一切長度都是以CSS畫素為單位的，CSS畫素的單位是px。

1.2 注意

在CSS規範中，長度單位可以分為兩類，絕對(absolute)單位以及相對(relative)單位。px是一個相對單位

在同樣一個裝置上，每1個CSS畫素所代表的物理畫素是可以變化的(即CSS畫素的第一方面的相對性);

在不同的裝置之間，每1個CSS畫素所代表的物理畫素是可以變化的(即CSS畫素的第二方面的相對性);

1.3 那麼PX到底是什麼？

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

不同的裝置，影象基本取樣單元是不同的，顯示器上的物理畫素等於顯示器的點距，而印表機的物理畫素等於印表機的墨點。而衡量點距大小和印表機墨點大小的單位分別稱為ppi

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

dpi：每英寸多少點。

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

1.4 CSS畫素的真正含義

由於不同的物理裝置的物理畫素的大小是不一樣的，所以css認為瀏覽器應該對css中的畫素進行調節，使得瀏覽器中 1css畫素的大小在不同物理裝置上看上去大小總是差不多 ，目的是為了保證閱讀體驗一致。為了達到這一點瀏覽器可以直接按照裝置的物理畫素大小進行換算，而css規範中使用**"參考畫素"**來進行換算。

1參考畫素即為從一臂之遙看解析度為96DPI

由於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畫素從來都只是一個相對值。

2、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畫素

3、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顯示技術所做的。

4、DPR(device pixels ratio)

4.1 定義

裝置畫素比（dpr描述的是未縮放狀態下，物理畫素和CSS畫素的初始比例關係，計算方法如下圖。

4.2 理解

裝置畫素比(dpr)是指在移動開發中1個css畫素佔用多少裝置畫素，如2代表1個css畫素用2x2個裝置畫素來繪製。

裝置畫素比(dpr)，公式為1px = (dpr)^2 * 1dp，可以理解為1px由多少個裝置畫素組成；

5、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、倍率與邏輯畫素

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 顯示技術解決的是顯示畫面精細程度的問題，而不是解決顯示內容容量的問題。

7、解析度、畫素和螢幕尺寸

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。

8、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個點距”！反倒是那些絕對單位，其實一點也不絕對。