ViewPort，邏輯像素/裝置獨立像素，物理像素/裝置獨立像素，解析度，CSS像素，裝置像素比DPR，像素密度PPI。

標籤：看不見   概念   顯示屏   minimum   www   世界   src   思考   程式   

一。相關基礎知識

小米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。