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

標籤：華為榮耀   back   瀏覽器核心   pre   oid   pix   系統   技術   變化   

一 像素知識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：

       1、Viewport就是行動裝置瀏覽器上(也可能是一個app中的webview)用來顯示網頁的一塊“畫布”。

       2、行動裝置上的頁面是顯示在Viewport上的。

       3、行動裝置的瀏覽器都有viewport元標籤，而引入viewport的目的就是用於解決PC頁面能在手機上正常顯示，不會因螢幕變小而擠壓布局導致頁面排版混亂的問題。

       4、在引入了Viewport概念並做如下規定後，就不會破壞那些沒有針對手機瀏覽器最佳化的PC網頁的布局，使用者可以通過平移和縮放來看網頁的其他部分。

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

       5、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、384、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件事： 
       1、將頁面初始縮放因子設定為給定的值，計算出相對於ideal viewport的寬，得到visual viewport的寬。 
       2、設定layout viewport的寬等於剛剛計算出來的visual viewport的寬 
(原文地址：http://www.quirksmode.org/mobile/metaviewport/#link15 
譯文地址：http://blog.csdn.net/aiolos1111/article/details/51919795 ) 
       3、設定layout viewport的寬等於ideal viewport的寬 
(原文地址：http://www.quirksmode.org/mobile/metaviewport/#link5) 
譯文地址：http://blog.csdn.net/aiolos1111/article/details/51919795 )

.

設定width=device-width這條規則實際上做了如下2件事: 
       1、將layout viewport的寬設定為裝置螢幕的寬度（以CSS像素單位計算的寬度，即螢幕的邏輯像素寬度，本人注） 
(原文地址：http://www.quirksmode.org/mobile/metaviewport/#link2) 
       2、將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/)

四 總結

1、裝置像素是裝置解析度的單位，同一個裝置的裝置像素大小固定不變 
2、DPR = 裝置像素/CSS像素 = 裝置像素 / 裝置獨立像素 ~= PPI/160 = 頁面縮放比例 
2、visual viewport width = ideal viewport width / zoom factor（其中，同一個裝置的ideal viewport的寬度固定不變，因此縮放頁面只是改變visual viewport的大小） 
3、CSS像素 = 裝置獨立像素 = 邏輯像素 
4、同一個裝置的CSS像素數字大小不變，但每CSS像素代表的長度會變，即CSS像素會伸縮 
5、現代瀏覽器中實現縮放的方式都是「展開」像素：即每CSS像素單位代表的長度發生變化，而像素總數字不變。所以縮放會引起CSS像素的變化。 
6、進行縮放時，visual viewport的尺寸會發生變化，layout viewport的尺寸保持不變 
7、行動裝置上的layout viewport的尺寸都大等於其瀏覽器的可視地區(visual viewport) 
8、css中的1px並不是代表裝置像素上的1px 
9、行動裝置解析度越大，css中1px代表的物理像素就會越多，devicePixelRatio的值也越大 
10、ideal viewport的寬度等於行動裝置的螢幕寬度(這個理想的寬度是指以CSS像素單位計算的寬度，即螢幕的邏輯像素寬度)，跟裝置的物理寬度沒有關係。同一個裝置的ideal viewport的寬度固定不變。 
11、移動端常見的作業系統及其瀏覽器核心如 
 
12、移動端頁面設計尺寸原則：因為dpr一般都是1或者2，所以設計頁面時應按照裝置邏輯像素的2倍大小進行設計 
13、最後以三張圖結束本文 
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">後的移動端頁面效果 

 

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