深刻理解移動端像素知識與Viewport知識（轉 ）

一 像素知識

1.1 設備像素(device pixel)

 

        它是物理概念，指的是設備中使用的物理像素(Physic pixel)。這個單位用px表示，它是一個[相對絕對單位]————
即在一樣一個設備上，每1個設備像素所表明的物理長度(如英寸)是固定不變的(即設備像素的絕對性); 
但在不一樣的設備之間，每1個設備像素所表明的物理長度(如英寸)是能夠變化的(即設備像素的相對性);

        咱們所說的設備分辨率的單位就是設備像素。

        有了設備像素概念，咱們就能夠解釋下表中：不一樣英寸大小的移動設備上，分辨率卻相同的緣由了————由於設備像素的相對性

手機類型	華爲榮耀8	IPhone6S Plus
屏幕尺寸	5.2英寸	5.5 英寸
分辨率	1920x1080	1920 x 1080
PPI	423	401

注：表格中的數據來源 
華爲榮耀8：http://www.vmall.com/product/938665621.html 
IPhone6S Plus:https://www.apple.com/cn/iphone-6s/specs/

1.1.1 設備分辨率

       設備分辨率的單位就是設備像素(px)。

       提到設備分辨率，順便引用以下地址的博客說明一下： 
http://www.chinaz.com/manage/2015/0902/441624.shtml

在同一個手機或電腦設備上，它的設備像素是固定的，這是廠商在出廠時就設置好了的————即一個設備的分辨率是固定不變的。

       因此能夠調整電腦屏幕的分辨率(手機就沒這個功能！)？那只是你的眼睛在欺騙你，具體緣由請見： 
http://www.chinaz.com/manage/2015/0902/441624.shtml <電腦屏幕能夠調分辨率，難道是經過調整它的像素大小實現的？>一節

1.2 CSS像素(css pixel)

       設備像素和CSS像素通常使用px做爲單位，而且在桌面瀏覽器的100%縮放狀況下，css的1個像素每每都是對應着電腦屏幕的1個物理像素，這可能會形成咱們的一個錯覺，那就是css中的像素就是設備的物理像素。 
       但實際狀況卻並不是如此，css像素只是一個抽象的單位，在不一樣的設備或不一樣的環境中，css中的1px所表明的設備物理像素的長度是不一樣的。 
       在爲桌面瀏覽器設計的網頁中，咱們無需對這個津津計較，但在移動設備上，必須弄明白這點。

上述論述獲得以下結論：

css中的1px並非總表明設備像素上的1px，尤爲是在移動設備上。

        CSS像素是Web編程的概念，指的是CSS樣式代碼中使用的邏輯像素。它是一個[純相對單位]———— 
在一樣一個設備上，每1個CSS像素所表明的物理像素是能夠變化的(即CSS像素的第一方面的相對性); 
在不一樣的設備之間，每1個CSS像素所表明的物理像素是能夠變化的(即CSS像素的第二方面的相對性);

從上述定義能夠看出：

CSS像素是一個相對單位，相對的是設備像素(device pixel)。 
(原文地址：http://www.jianshu.com/p/af6dad66e49a)

1.2.1 縮放

        引用PPK大神的論述來講明一下縮放的原理：

Zooming as implemented in modern browsers consists of nothing more than 「stretching up」 pixels. That is, the width of the element is not changed from 128 to 256 pixels; instead the actual pixels are doubled in size. Formally, the element still has a width of 128 CSS pixels, even though it happens to take the space of 256 device pixels. (原文網址：http://www.quirksmode.org/mobile/viewports.html)

譯文： 
        現代瀏覽器中實現縮放的方式都是「拉伸」像素(即每CSS像素單位表明的長度發生變化，而像素總數字不變)。(若是將一個元素爲128px的元素放大一倍, 譯者注)元素的寬度並無從128px變到256px，事實上只是「實際像素」變爲2倍大小(即256px)，而形式上這個元素的寬度仍是128px，儘管它已經佔據了256個設備像素的空間。

        因此，咱們能夠獲得以下結論：

縮放會引發CSS像素的變化——即引發每1個CSS像素所表明的物理像素變化。例如，當用戶把頁面放大一倍，那麼css中1px所表明的物理像素也會增長一倍；反之把頁面縮小一倍，css中1px所表明的物理像素也會減小一倍。

        因此，有上述描述，咱們能夠獲得以下結論：

頁面縮放比例 = 物理像素/CSS像素

1.3 DPI&PPI

        引用 http://weizhifeng.net/you-should-know-about-dpi.html 中關於DPI和PPI的定義以下：

       DPI(dots per inch)爲打印機每英寸能夠噴的墨汁點數，用於印刷行業中度量空間點的密度 
       PPI(pixels per inch)爲屏幕每英寸的像素數量(即在一個對角線長度爲1英寸的正方形內所擁有的像素數)，用於度量計算機顯示屏上像素的密度 
       目前PPI(主要是iOS)和DPI(好比在Android中)都會用在計算機顯示設備的參數描述中，而且兩者的意思是同樣的，都是表明像屏幕素密度

屏幕像素密度，屏幕分辨率，屏幕尺寸三者的關係以下： 

注：上圖公式中，如分辨率爲1920px*1080px，則1920px就是公式裏的縱向，1080px就是公式裏的橫向了

1.4 DPR

       全稱設備像素比(Device Pixel Ratio）。先給出其官方定義：

在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的定義爲：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨立像素。

       由上述公式計算出ppi是爲了獲得密度分界，得到默認縮放比例，即設備像素比–dpr

       安卓的設備像素好比下： 

由上圖可知，ppi在120-160之間的手機被歸爲低密度手機，160-240被歸爲中密度，240-320被歸爲高密度，320以上被歸爲超高密度（Apple給了它一個高大上的名字——Retina） 
(原文地址：http://www.jianshu.com/p/af6dad66e49a)

        獲取蘋果的設備像素比比較簡單：

先規定密度分界基數爲160，而後設備像素比=PPI除以密度分界基數160

1.5 DPR與PPI的關係

       綜合上述安卓和蘋果的密度分界圖，能夠獲得的DPR與PPI的關係以下：

DPR = PPI/160

1.6 設備像素與CSS像素之間的關係

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

       因此，有以下公式：

DPR = 設備像素/CSS像素

1.7 設備獨立像素(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個物理像素。可是要注意的是，devicePixelRatio在不一樣的瀏覽器中還存在些許的兼容性問題，因此咱們如今還並不能徹底信賴這個東西，具體的狀況能夠看下這篇文章

二 Viewport知識

       關於viewport的知識，主要參閱了以下7篇博客： 
PPK大神關於Viewport的三篇研究文章： 
http://www.quirksmode.org/mobile/viewports2.html 
http://www.quirksmode.org/mobile/viewports.html 
http://www.quirksmode.org/mobile/metaviewport/#t10 
以及上述三篇文章的譯文： 
http://weizhifeng.net/viewports2.html 
http://weizhifeng.net/viewports.html 
http://blog.csdn.net/aiolos1111/article/details/51919795 
以及本文開頭提到的博客： 
http://www.cnblogs.com/2050/p/3877280.html

        首先引用PPK文章中的說明來解釋一下什麼是Viewport

George Cummins explains the basic concept best here at Stack Overflow:

「 
Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes. 
」

See also this explanation by Chris.

The visual viewport is the part of the page that’s currently shown on-screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport. 
（原文地址：http://www.quirksmode.org/mobile/viewports2.html）

譯文：

George Cummins在Stack Overflow上對基本概念給出了最佳解釋： 
把layout viewport想像成爲一張沒法改變大小或形狀的大圖。如今想像你有一個小一些的框架，你經過它來看這張大圖。這個小框架的周圍包裹着不透明材料，掩蓋了你全部的視線，你只能看到這張大圖的一部分。你經過這個框架所能看到的大圖的一部分就是visual viewport。你能夠後拉(放大)框架以觀看整個圖片，或者你能夠靠近一些（縮小框架）只看局部。你也能夠改變框架的方向，可是大圖（layout viewport）的大小和形狀永遠不會變。

Chris給出的關於Visual viewport的解釋： 
visual viewport是頁面顯示在當前屏幕上的那一部分。用戶能夠經過滾動來改變他所看到的頁面的部分，或者經過縮放來改變visual viewport的大小。 
（原文地址：http://blog.csdn.net/aiolos1111/article/details/51956691）

       下面以我本身的理解解釋一下什麼是Viewport：

       一、Viewport就是移動設備瀏覽器上(也多是一個app中的webview)用來顯示網頁的一塊「畫布」。

       二、移動設備上的頁面是顯示在Viewport上的。

       三、移動設備的瀏覽器都有viewport元標籤，而引入viewport的目的就是用於解決PC頁面能在手機上正常顯示，不會因屏幕變小而擠壓佈局致使頁面排版混亂的問題。

       四、在引入了Viewport概念並作以下規定後，就不會破壞那些沒有針對手機瀏覽器優化的PC網頁的佈局，用戶能夠經過平移和縮放來看網頁的其餘部分。

移動設備上的layout viewport的寬永大等於可視區域(Visual viewport)的寬 
（原文地址：http://www.quirksmode.org/mobile/metaviewport/#t10 ）

       五、PPK大神對於移動設備上的viewport有着很是多的研究，他認爲移動設備上有三個viewport：layout viewport 、 visual viewport 和 ideal viewport。

       下面咱們分別講解一下這三種Viewport

2.1 layout viewport(佈局視口)

       這是移動設備引入的第一個Viewport。引用一段我很是欣賞的話來講明layout 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的寬度： 

注：該圖引用自：http://www.quirksmode.org/mobile/metaviewport/#t10 
圖中的數值均是合理的，沒有對錯之分，這個數值是由設備廠商本身決定的。

2.1.1 手機瀏覽器渲染網頁的過程

       在這裏有必要說明一下手機瀏覽器渲染網頁的過程：

Step 1: 渲染————將整個頁面渲染在一個layout viewport中，以保證頁面排版正確。 
Step 2: 縮放————將整個layout viewport縮放到visual viewport大小，以保證頁面在手機屏幕上被完整顯示出來

       也正是由於縮放，纔會出現手機上font-size爲40px與pc上font-size12px的同等物理大小的狀況

2.1.2 獲取layout viewport的尺寸

經過document.documentElement.clientWidth和-Height能夠獲取layout viewport的尺寸 
兼容性：這種獲取方式在Android 和IPhone手機上徹底支持。 
(原文地址：http://weizhifeng.net/viewports2.html)

2.2 visual viewport(可視視口)

       一樣引用一段我很是欣賞的話來講明visual viewport：

由於瀏覽器可視區域(visual viewport)的寬度比這個layout viewport的寬度要小(見第四部分<總結>第7條)，帶來的後果就是瀏覽器會出現橫向滾動條，因此咱們還須要一個viewport來表明瀏覽器可視區域的大小，ppk把這個viewport叫作 visual viewport。

2.2.1 獲取visual viewport的尺寸

對於visual viewport，它是經過window.innerWidth/Height來進行度量的。很明顯當用戶縮小或者放大的時候，度量的尺寸會發生變化。 
兼容性：IPhone上徹底支持，在Android 2, Oprea mini 和 UC 8中沒法正確獲取。 
(原文地址：http://weizhifeng.net/viewports2.html)

2.3 ideal viewport(理想視口)

       再次引用一段我很是欣賞的話來講明ideal 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的寬度，那麼這個元素的寬度就是設備屏幕的寬度了，也就是寬度爲100%的效果。ideal viewport 的意義在於，不管在何種分辨率的屏幕下，那些針對ideal viewport 而設計的網站，不須要用戶手動縮放，也不須要出現橫向滾動條，均可以完美的呈現給用戶。

       從上述描述，咱們能夠獲得一個結論：

       ideal viewport的寬度等於移動設備的屏幕寬度(這個理想的寬度是指以CSS像素單位計算的寬度，即屏幕的邏輯像素寬度)，跟設備的物理寬度沒有關係。在css中，這個寬度就至關於100%的所表明的那個寬度。

       即有： 
ideal viewport的寬度 = 屏幕的邏輯像素寬度

最後，咱們經過一段引用再說說ideal viewport存在的必要性：

爲何須要有理想的viewport呢？好比一個分辨率爲320x480的手機理想viewport的寬度是320px，而另外一個屏幕尺寸相同但分辨率爲640x960的手機的理想viewport寬度也是爲320px，那爲何分辨率大的這個手機的理想寬度要跟分辨率小的那個手機的理想寬度同樣呢？這是由於，只有這樣才能保證一樣的網站在不一樣分辨率的設備上看起來都是同樣或差很少的。實際上，如今市面上雖然有那麼多不一樣種類不一樣品牌不一樣分辨率的手機，但它們的理想viewport寬度概括起來無非也就 320、360、38四、400等幾種，都是很是接近的，理想寬度的相近也就意味着咱們針對某個設備的理想viewport而作出的網站，在其餘設備上的表現也不會相差很是多甚至是表現同樣的。

三 meta標籤控制viewport

移動設備默認的viewport是layout 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">

• 1

       那這段代碼的做用是什麼呢？

允不容許用戶縮放不一樣的網站有不一樣的要求，咱們不做過多說明，關鍵看一下width=device-width和initial-scale=1.0的做用：

設置 initial-scale這條規則實際上作了以下2件事： 
       一、將頁面初始縮放因子設置爲給定的值，計算出相對於ideal viewport的寬，獲得visual viewport的寬。 
       二、設置layout viewport的寬等於剛剛計算出來的visual viewport的寬 
(原文地址：http://www.quirksmode.org/mobile/metaviewport/#link15 
譯文地址：http://blog.csdn.net/aiolos1111/article/details/51919795 ) 
       三、設置layout viewport的寬等於ideal viewport的寬 
(原文地址：http://www.quirksmode.org/mobile/metaviewport/#link5) 
譯文地址：http://blog.csdn.net/aiolos1111/article/details/51919795 )

.

設置width=device-width這條規則實際上作了以下2件事: 
       一、將layout viewport的寬設置爲設備屏幕的寬度（以CSS像素單位計算的寬度，即屏幕的邏輯像素寬度，本人注） 
(原文地址：http://www.quirksmode.org/mobile/metaviewport/#link2) 
       二、將ideal viewport的寬設置爲layout viewport的寬。(原文地址：http://www.quirksmode.org/mobile/metaviewport/#link5)

       因此，綜合這2條規則，知道該標籤的做用是讓layout viewport的寬度等於設備的屏幕寬度，再等於ideal viewport的寬度，而這也是移動WEB頁面的最佳實踐原則:

視圖viewport的寬度 = 佈局viewport的寬度 = 設備寬度(device-width)

3.1 兩個問題

       根據上述描述，有兩個問題須要澄清一下：

3.1.1 若是不設置meta viewport標籤

       若是不設置meta viewport標籤，那麼移動設備上瀏覽器默認的layout viewport寬度值爲980px，1024px等這些，總之是大於屏幕寬度的（這裏的寬度所用的單位px都是指css中的px，它跟表明實際屏幕物理像素的px不是一回事）。 
       若是不設置meta viewport標籤，一個PC的頁面在移動設備上會進行縮放並完整顯示出來！

3.1.2 爲何要用2個相同功能的規則

       你們應該發現width=device-width和initial-scale=1.0的功能基本同樣，那爲何都要用到呢？ 
咱們繼續引用PPK大神的話來講明： 


原文地址：http://www.quirksmode.org/mobile/metaviewport/

根據上圖咱們可得： 
       width=device-width在IPhone和IPad上存在兼容問題； 
       initial-scale=1.0在IE上存在兼容問題

因此，

要把layout 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.0, maximum-scale=1.0, user-scalable=no">

• 1

3.2 縮放因子

       上面提到了一個概念」頁面初始縮放因子」，如今咱們說明一下什麼是縮放因子：

先給出PPK大神關於縮放因子的公式

zoom factor = ideal viewport width / visual viewport width 
(PS：visual viewport的寬度指的是瀏覽器可視區域的寬度)

從這個公式，咱們能夠獲得一個結論：

頁面縮放是相對於ideal viewport來進行縮放的 
(原文地址：http://www.quirksmode.org/mobile/metaviewport/)

四 總結

一、設備像素是設備分辨率的單位，同一個設備的設備像素大小固定不變 
二、DPR = 設備像素/CSS像素 = 設備像素 / 設備獨立像素 ~= PPI/160 = 頁面縮放比例 
二、visual viewport width = ideal viewport width / zoom factor（其中，同一個設備的ideal viewport的寬度固定不變，所以縮放頁面只是改變visual viewport的大小） 
三、CSS像素 = 設備獨立像素 = 邏輯像素 
四、同一個設備的CSS像素數字大小不變，但每CSS像素表明的長度會變，即CSS像素會伸縮 
五、現代瀏覽器中實現縮放的方式都是「拉伸」像素：即每CSS像素單位表明的長度發生變化，而像素總數字不變。因此縮放會引發CSS像素的變化。 
六、進行縮放時，visual viewport的尺寸會發生變化，layout viewport的尺寸保持不變 
七、移動設備上的layout viewport的尺寸都大等於其瀏覽器的可視區域(visual viewport) 
八、css中的1px並非表明設備像素上的1px 
九、移動設備分辨率越大，css中1px表明的物理像素就會越多，devicePixelRatio的值也越大 
十、ideal viewport的寬度等於移動設備的屏幕寬度(這個理想的寬度是指以CSS像素單位計算的寬度，即屏幕的邏輯像素寬度)，跟設備的物理寬度沒有關係。同一個設備的ideal viewport的寬度固定不變。 
十一、移動端常見的操做系統及其瀏覽器內核以下圖 
 
十二、移動端頁面設計尺寸原則：由於dpr通常都是1或者2，因此設計頁面時應按照設備邏輯像素的2倍大小進行設計 
1三、最後以三張圖結束本文 
a、未設置meta viewport標籤時的移動端頁面效果 

b、設置<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">後的移動端頁面效果 

c、設置<meta name="viewport" content="width=device-width,initial-scale=1.0">後的移動端頁面效果