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

時間 2019-12-01

標籤 viewport 邏輯像素設備獨立物理分辨率 css dpr 密度 ppi 欄目 HTML5 简体版

原文原文鏈接

一。相關基礎知識css

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

如下都以小米note這個設備爲例。程序員

1.通常說手機的幾寸是指：手機顯示屏對角線的長度。1英寸2.54釐米。小米note爲5.7英寸，約爲14.478釐米。瀏覽器

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

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：屏幕大小）idea

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

　　　 ③從公式能夠看出來，它涉及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.補充

先說幾個東西，你打開瀏覽器+F12後，在控制檯輸入「window.innerWidth」,"document.body.clientWidth","window.outerWidth",最大化瀏覽器，縮小瀏覽器，切到手機界面分別去看下3個狀況下的他們的值。

①window.innerWidth:是你的瀏覽器的可視區域的實時大小（包括了滾動條，但手機端通常沒有滾動條），好比你又一個1900px（CSS的px）寬的網頁，而window.innerWidth=1300px（CSS的px）是指你如今經過瀏覽器窗口能夠看見這個1900px網頁的1500px部分，其他的要你用滾動條去調了。

②document.body.clientWidth:就是當前瀏覽器下，瀏覽器能夠容納的網頁文檔的大小（若是你把html和body的margin，padding，border都設爲沒有），其實就是layout viewport。

③window.outerWidth:返回窗口的外部寬度，包括全部的界面元素（如工具欄/滾動），正由於這樣當你用手機打開瀏覽器或者把瀏覽器最大化，這個時候它是你的設備的邏輯大小（平時咱們說咱們設備的屏幕，要不是說幾寸--這個是物理視覺上的感知大小，若是說分辨率--這是一行所包含的像素多少，而像素是一個單位，沒有固定大小的。若是要用CSS中的px像素來衡量這個屏幕的大小就是邏輯上的大小，即用CSS的px來衡量大小）

更多請參看：http://blog.csdn.net/jcy472578/article/details/19041897（權侵刪）

2）

電腦上：其實電腦上的都不用去測，由於通常來講，電腦上的所說的分辨率，好比個人1920px*1080px（這個px就是等價於CSS中的px，也就是說電腦的分辨率就是它的邏輯大小）。

手機上：手機上是不能縮放瀏覽器的，以小米note+uc爲例，經過測「window.innerWidth」,"document.body.clientWidth","document.body.scrollWidth","window.outerWidth"，我獲得小米手機的當前最新版uc的window.innerWidth=1572px，document.body.clientWidth=980px，window.outerWidth=393px,document.body.scrollWidth=1700px(個人網頁寬度)。

就這麼說吧，1700px是咱們在pc端設計的網頁寬度（CSS中的px），393px是咱們手機的邏輯大小（就是用CSS中的px去衡量手機屏幕寬度），980px其實就是這裏的Layout Viewport。

總結一下：

個人測試代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
border:none;
}
</style>
</head>
<body>
    <div style='width:200px;height:50px;margin-bottom:20px;background:red;'>200px</div>
    <div style='width:400px;height:50px;margin-bottom:20px;background:blue;'>400px</div>
    <div style='width:600px;height:50px;margin-bottom:20px;background:green;'>600px</div>
    <div style='width:800px;height:50px;margin-bottom:20px;background:yellow;'>800px</div>
    <div style='width:980px;height:50px;margin-bottom:20px;background:gray;'>980px</div>
    <div style='width:1200px;height:50px;margin-bottom:20px;background:pink;'>1200px</div>
    <div style='width:1700px;height:50px;margin-bottom:20px;background:pink;'>1700px</div>

<script>
window.onload=function(){ 
     alert('inner:'+window.innerWidth);
     alert('canseebody:'+document.body.clientWidth);
     alert('outer:'+window.outerWidth);
     alert('allbody:'+document.body.scrollWidth);
     alert('availwidth:'+window.screen.availWidth);
}
</script>
</body>
</html>

①layout viewport：用來承載網頁的視窗，手機上你能夠用document.body.clientWidth獲取。網頁比做畫，這就像畫布，把網頁縮放在layout viewport上面。下面有兩部分代碼，A網頁是超過通常layout viewport默認的980px的，B網頁是通常默認的layout viewport的同樣大。你發手機上觀看下，會發現字體什麼的大小是不同的，由於大的網頁你要放到980px寬的layout viewport上，是要進行縮小的。而980px的則不用。

A網頁（1700px寬）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
border:none;
}
</style>
</head>
<body>
    <div style='width:200px;height:50px;margin-bottom:20px;background:red;'>200px</div>
    <div style='width:400px;height:50px;margin-bottom:20px;background:blue;'>400px</div>
    <div style='width:600px;height:50px;margin-bottom:20px;background:green;'>600px</div>
    <div style='width:800px;height:50px;margin-bottom:20px;background:yellow;'>800px</div>
    <div style='width:980px;height:50px;margin-bottom:20px;background:gray;'>980px</div>
    <div style='width:1200px;height:50px;margin-bottom:20px;background:pink;'>1200px</div>
    <div style='width:1700px;height:50px;margin-bottom:20px;background:pink;'>1700px</div>

<script>
window.onload=function(){ 
     alert('inner:'+window.innerWidth);
     alert('canseebody:'+document.body.clientWidth);
     alert('outer:'+window.outerWidth);
     alert('allbody:'+document.body.scrollWidth);
     alert('availwidth:'+window.screen.availWidth);
}
</script>
</body>
</html>

B網頁（980px寬）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
border:none;
}
</style>
</head>
<body>
    <div style='width:200px;height:50px;margin-bottom:20px;background:red;'>200px</div>
    <div style='width:400px;height:50px;margin-bottom:20px;background:blue;'>400px</div>
    <div style='width:600px;height:50px;margin-bottom:20px;background:green;'>600px</div>
    <div style='width:980px;height:50px;margin-bottom:20px;background:gray;'>980px</div>
<script>
window.onload=function(){ 
     alert('inner:'+window.innerWidth);
     alert('canseebody:'+document.body.clientWidth);
     alert('outer:'+window.outerWidth);
     alert('allbody:'+document.body.scrollWidth);
     alert('availwidth:'+window.screen.availWidth);
}
</script>
</body>
</html>

②Visual Viewport：這就是你經過你的手機瀏覽器，能夠看見網頁的內容大小。好比我上面的A網頁放到UC瀏覽器上，我只能看到這個網頁的1572px大小的部分，其他的部分我須要經過滑動滾動條才能看見。能夠用window.innerWidth獲取

③Ideal Viewport：它的大小就是用CSS的px來衡量設備屏寬的大小（CSS的px來衡量）。它是根據你的設備來講的，那你的ideal viewport的大小是特定的。能夠用window.outerWidth獲取。

　舉例說吧：①蘋果6s：1334 x 750 像素分辨率（物理像素），326 ppi，5.44英寸。邏輯像素375px*667px（這個纔是咱們網頁中對應的px，也能夠說是真的只有那麼點地方給你放你網頁設計時的CSS元素。

　　　　　　1）.那這個邏輯像素怎麼算呢，很差意思，它跟尺寸不要緊，跟物理像素不要緊，跟ppi也不要緊，它就是手機制做方給它制定好的。

　　　　　　好比三星的手機

　　　　　　②.三星S3：1280x720分辨率&4.8英寸，S4：5英寸1920x1080分辨率&5英寸，S5：1920×1080分辨率&5.1英寸，S6：2560x1440分辨率&5.1英寸，S7：2560x1440分辨率&5.1英寸

　　　　　　1）從這上面咱們獲得了什麼，它的屏幕尺寸幾乎當它沒變過。而它的分辨率愈來愈高，這覺得什麼，只是PPI高了，單位物理長度裏的像素多了，對咱們而言是一樣尺寸裏面每一個像素更加微小，咱們根據感受到了清晰（雖然過了300多感受不到了）

　　　　　　2）我要告訴你的是以上全部三星手機的邏輯大小（用CSS中的1px去等同效果到手機上）都是360px*640px（這個px就是CSS中的px，1:1關係）。

　　　　　　3）這個「邏輯大小」是手機方去制定的，他們以爲多少合適，就設置多少（好比作屏幕的時候，它的屏幕分辨率決定下來了，也就是一行多少個物理像素定了，那他們再去考慮CSS設計的好比一個10px長的元素在屏幕該佔多寬比較合適，去規劃一個比較合理的邏輯大小）。這個邏輯大小其實就是Ideal Viewport（它要看不一樣設備的具體多少了）

5.爲了更好地理解，我用實際例子來總結：

如上面A網頁代碼，我在電腦端設計了一個寬達1700px的網頁（CSS的px），我要放到小米note手機的uc瀏覽器上。若是直接縮放到手機的屏幕上（想一想一些早期的手機），這個手機屏幕的大小指的是Ideal viewport的大小，那你想一想看把一個寬爲1700px（css的px）縮放到一個寬爲393px的顯示區域內，網頁上的元素還有法看嘛。因此他們就想了一個辦法，弄出一個虛擬的layout viewport，用這個區承載網頁，這樣即便是縮放，也不會太厲害。想像一下你和你的一個朋友，你在一個四面都是牆的房間裏，你朋友在外面，你出不去，他進不來。這個時候，你朋友說想給你看個長爲1700px的畫，因而你在牆上打了個長方形的洞，由於你力氣有限，只能打出寬爲1575px的洞（就是你的網頁），因此你只能看到1575px寬的部分，想看右邊的時候，等叫你朋友去拉一下。咱們的設備所能讓咱們看見的整個網頁的大小區域，就是visual viewport。這樣還不是很舒服，由於是通過縮放的。字體什麼的會很小。因此人們就想到，若是咱們設計了一個10px大小的元素（css的px），我以爲這樣的大小視覺上挺舒服的，剛好那麼大小，更但願到了手機屏幕上仍是顯示差很少那麼大小，讓咱們視覺上感覺到差很少。因而咱們就讓承載網頁的Layout Viewport的大小和當前設備的邏輯大小（CSS中的px表示）同樣，由於這樣的話，就等於說沒有縮放，你pc端設計元素爲10px大小，到了手機上顯示效果同樣。可是我要多說一點，其實你用尺子去量，pc端的10px大小的元素在這個時侯物理長度上仍是不同的，由於咱們眼睛看電腦時會比較遠，看手機時，咱們會離得比較近，總之他們的設計會讓你在視覺上，pc的10px到了手機上沒有變化，仍是那麼大。有人會問，把你的網頁放到只有Ideal viewport這麼點大的區域，不會放不下嗎？不是又回到最初的模糊問題嗎？因此呀，你用這個設計的時候要用自適應，響應式去讓你的網頁在手機端顯示的時候寬度最大不超過這個Ideal viewport。

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的寬度。這樣就能讓那個網頁適應你的設備了。

設置了這個會讓layout viewport 等於當前設備的Ideal viewport，而且那個Visual Viewport也是等於Ideal Viewport大小。

這個常見的設置做用就是：讓承載整個網頁的Layout viewport的大小等於Ideal viewport的大小，比例爲1就是要把網頁放縮倍數。

一句話說就是，把縮放scale倍的網頁以左上角爲起點放在了寬爲width的可視區域內，出了可視區域外，就會有滾動條，要滑。

舉例：一個網頁寬爲500px，可視區域爲500px，那麼這個網頁剛好地顯示，若是設置比例爲2，那麼就是等於說把這個寬爲500px的網頁放大成一個寬爲1000px的網頁放在了寬爲500的可視區域，顯然橫向只能看到這個網頁左邊的500px。

一個連接：特別是他後面特供的蘋果官方的內容很好，像百度的前幾頁全是抄來抄去，甚至都不肯意這寫幾句本身的角度看。連接權侵刪！

　http://blog.sina.cn/dpool/blog/s/blog_7d7322470102uz90.html　　

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