一。相關基礎知識

小米note參數查看：http://www.mi.com/minote/specs/

以下都以小米note這個設備為例。

1.一般說手機的幾寸是指：手機顯示屏對角線的長度。1英寸2.54厘米。小米note為5.7英寸，約為14.478厘米。

2.物理像素/設備像素/像素：以一個很不嚴謹的方式去通俗的解釋：這個屏幕是5英寸的，先把豎著等距畫1919條線，這樣橫著看會有1920列，同理再橫著畫1079條線，豎著看會有1080行，這個過程中橫線和豎線會相交，於是產生了一個個格子，這個格子很小很小，可以把這個格子就當做一個物理像素。它是描述分辨率大小的單位，註意呀，是一個單位，而且沒有固定實際物理長度的，沒有大小的。

3.邏輯像素/設備無關像素/設備獨立像素：比如我們有一個元素是一個點，在手機A上（假設手機A一行有10個像素）占了一個像素，這個時候要把這個點顯示到手機B上（假設手機B一行有100個像素），如果我們再按物理像素來，也給它分配一個像素，它占一行的百分之一，而在手機A上占十分之一，你會覺得放到手機B上一下變得好小，要是手機B一行有100000個像素，你那個元素都沒法看了，因為看不見了。所以想到設立一個邏輯像素，這樣從新說的話：這個元素在手機A上占了一個邏輯像素，在手機B上也占了一個邏輯像素，只不過在手機B上把10個像素當做一個邏輯像素用了，這樣才能讓不同設備的不同屏幕上呈現相同的效果。

　　　　　　　　　　　　----16歲程序員想成為畫家.jpg

4.分辨率：再強調一次呀，分辨率的單位是像素（物理像素），平常俗話說的清不清晰呀，好高清喲。是在說另一個衡量分辨率的東西：PPI。要看要用什麽描述了，比如你說分辨率是1920*1080那肯定是用物理像素來描述了，這個並不能說明它清不清，因為忽略了屏幕尺寸。

5.PPI：①PPI是Pixels Per Inch縮寫，像素的密度單位，表示的是每英寸所擁有的像素數目。公式表達為 PPI=√（X^2+Y^2）/ Z （X：長度像素數；Y：寬度像素數；Z：屏幕大小）

　　　 ②怎麽說呢，它是連接像素世界和物理世界的橋梁紐帶（你不能確定一個像素是多少大小），物理單位內的像素越多，密度越高，PPI越大，能更清晰的顯示畫面。

　　　 ③從公式可以看出來，它涉及2個因素，分辨率和設備尺寸大小。設備顯示屏越小，分辨率越高，這一刻更清晰。

　　　 ④其實，PPI過了一定程度，我們一般人就已經感受不出來，視力有限。喬哥說：“當你所拿的東西距離你10-12英寸（約25-30厘米）時，它的分辨率只要達到300ppi這個‘神奇數字’（每英寸300個像素點）以上，你的視網膜就無法分辨出像素點了。”

6.CSS像素：它其實就是個概念性的東西，和設備像素（物理像素）不對等的。不縮放頁面的情況下等於邏輯像素（設備獨立像素）。其實CSS用的像素就想它是邏輯像素，因為我們設計網頁時，希望是那個px是不變的嘛。

7.設備像素比DPR：DPR ＝ 設備像素/設備獨立像素=物理像素/邏輯像素。怎麽說呢，看我上面的圖：2個屏幕都假設邏輯像素是16，然後左圖的設備像素是16（4*4），而右圖的設備像素是64（8*8），所以左邊的設備屏幕的DPR是1，右邊的DPR是4。只要兩個元素的邏輯像素是一樣的，那這個元素在左右兩個設備裏所帶給我們的視覺大小是一樣。分析一波：2個元素要是邏輯像素一樣，就會保持一樣大小，這時，DPR越大，所占的設備像素越大。再想：當不縮放的情況下，DPR=設備像素/CSS像素。再想，一個設備生產出來了，它的設備像素是固定的，它的設備獨立像素也是固定的（即邏輯上理想化，比如元素在A設備上它是占一個邏輯像素，在B設備上它也是一個邏輯像素，它不會受到設備的影響），那它的DPR也是固定的。但是我們這個都是根據一臺設備來說的，不同的設備不就等於設備像素是變化的嘛。

二。Viewport

1.具體詳細的解釋我就沒了，我只是想說下我的理解。

2.Viewport是站在瀏覽器的角度來看的，被說有3種，Layout Viewport，Visual Viewport，Ideal Viewport。

3.Layout Viewport：

pc端先把瀏覽器最大化，手機端不用，因為也不能縮放瀏覽器。可以在瀏覽器的console輸入window.innerWidth查看對應的Layout Viewport。以UC瀏覽器最新的為例，pc端的LayoutViewport為1920px（和CSS中的px和上面的邏輯像素一個東西），移動端的為1572px。

它是一個虛擬的視窗，因為如果直接把網頁放在手機上，大小是不夠的。手機與網頁對應的邏輯像素，比如蘋果4分辨率是960*640px（這個是物理像素），它的邏輯像素是320*480px（這個是邏輯像素）。不縮放情況下css的px對應的就是邏輯像素，1:1關系。所以你覺得你一個800px（CSS的px這裏也等於邏輯像素）寬的網頁怎麽可能在一個寬為320px（邏輯像素）的蘋果4的瀏覽器上。不存在的。所以呢，他們就想出了一個辦法，可以用一個虛擬的視窗Layout viewport來裝載這個網頁，默認就把它設置的寬一些，以適應大部分的網頁。這個Layout viewport往上去兼容網頁，往下去兼容手機的寬度（邏輯像素）。至於怎麽把默認Layout viewport寬為980px的區域去恰好的轉換顯示到手機屏幕上，其實就是上面那副我自己畫的圖。具體這個過程我不多說了，網上這個有解釋的很詳細的。

我要更想說的是：比如uc的pc端的默認viewport（layout viewport）是1920px（邏輯像素，不縮放時就是CSS中的px），當我們不去用mata 設置viewport時，它是怎麽運作以提供用戶在手機端較好的體驗的呢。

其實是這樣的：①：當網頁的寬度小於等於1920px的時候，整個網頁會完整地的顯示在你的瀏覽器裏。②當網頁的寬度大於1920px的時候，因為這個時候網頁的寬度已經大於預設定的默認大小了（就是layout viewport的大小），所以當前layout viewport承載不了這個網頁了的寬了，它就會出現橫向滾動條了。

所以你網站設計的時候，千萬不要太大了，因為沒有用mata設置viewport的時候，你的網頁會出現橫向滾動條。但是又不能太小了，因為太小了會讓整個網頁顯示的很小，內容字體圖片等都會很小，很難受，體驗很差。就算不去用mata設置viewport也不要讓手機端瀏覽起來不舒服的過分。不過現在很少有網站還不用這個設置好了，畢竟更友好完美的方式為什麽不用，而且不難。至於怎麽樣的寬度是舒服的，你可以網上查，參考別的網站。

4.Visual Viewport：這個就是一個實時的瀏覽器的可視區域大小，仍舊用“window.innerWidth”來測。pc端可以調整瀏覽器的大小，多測幾次，會發現就是瀏覽器的可視區域的大小，仍舊是邏輯像素。

5.Ideal Viewport：這是個動態的視窗，它的大小就是設備本身的顯示屏寬的大小（仍舊是邏輯像素或者也可以稱為CSS的px）。它是根據你的設備來說的，你手機的尺寸這樣，分辨率那樣，那你的ideal viewport的大小是特定的。

總結一下哈：layout viewport是瀏覽器官方默認制定的，visual viewport是瀏覽器實時的可視區域大小，Ideal viewport是具體某一臺設備的屏寬大小（全是邏輯像素來說的，通常情況下邏輯像素可以等同於CSS中的px）

6.mata設置viewport：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

“width=device-width”設置viewport的Layout Viewport為設備的寬度（其實device-width就是ideal viewport），比例通常設置為1，就是layout viewport（默認出廠的承載網頁的默認寬度）等於ideal viewport的寬度。這樣就能讓那個網頁適應你的設備了。

結尾：我用了2個整天，接近24個小時，基本看完百度出來的前3頁相關內容，自己也思考了，試驗了，寫了又刪又寫，但是我知道語言上或者根本上的東西肯定還不夠懂。如果有錯誤不恰當或者錯誤之處，請指出，謝謝大家。

ViewPort，邏輯像素/設備獨立像素，物理像素/設備獨立像素，分辨率，CSS像素，設備像素比DPR，像素密度PPI。