資訊專欄INFORMATION COLUMN
摘要：首先舉個例子，的像素分辨率為英寸。像素密度定義代表的就是像素密度指的是每英寸的長度上排列的像素點數量。物理尺寸如圖可以知道，英寸也就指的是屏幕對角線的物理長度。英寸是一個固定長度，等于厘米。顯示效果如下如圖看出顯示要比清晰的多。
首先舉個例子，iphone6s的像素分辨率為1334x750,326ppi,4.7英寸。如圖
下面我們一個一個來解釋。
326ppi代表的就是像素密度(pixels per inch),指的是每英寸的長度上排列的像素點數量。
首先1334x750，代表的是屏幕分辨率，也就是說iPhone6s的屏幕是由縱向像素1334*橫向像素750個像素點組成。單位pixel。
如圖可以知道，4.7英寸也就指的是iPhone6s屏幕對角線的物理長度。1英寸是一個固定長度，等于2.54厘米。
B.像素密度的計算像素密度=對角線分辨率/屏幕尺寸。如下
計算:勾股定理算出對角線的分辨率：√(13342+7502)
對角線分辨率除以屏幕尺寸：√(13342+7502)/4.7≈440dpi。C.直觀感受理解像素密度
像素密度越高，代表屏幕顯示效果越精細。Retina屏比普通屏清晰很多，就是因為Retina屏幕像素密度高。最明顯的就是iPhone 3GS和iPhone 4的區別。屏幕尺寸一樣因為屏幕分辨率相差一倍所以屏幕像素密度也相差一倍。顯示效果如下
如圖看出iPhone4顯示要比iPhone 3gs清晰的多。根本原因是因為iPhone3gs的1個像素點的大小相對于iPhone4來說等于它屏幕的4個(2x2)像素大小。如下圖。
注意注意注意:這里的1像素指的是物理設備的1個像素點。也就是說不同像素密度的物理設備的一個像素點的大小是不一樣的。也就意味著對于物理設備屏幕的單個像素點的大小是不是一個固定的大小。用稍微專業一點的話來說就是，單個的設備像素的大小是不定的。
重要概念理解上面我們討論的是關于物理設備的像素密度(再次強調:這里的像素就是物理像素或者說是設備像素，對應于像素密度不同的設備具體像素點的大小都是不一樣大的。像素密度越大，像素點越小，顯示的細節就越多越豐富。反之則情況剛好相反)。那么接下來我們要說的幾個重要概念是什么呢？我們先從css像素與設備像素開始討論。
A.css像素和設備像素首先我們需要明確一點:在我們編寫CSS的時候的px和設備自身的px是沒有任何關系的。
css pixel:瀏覽器使用的抽象單位，主要用來在網頁上繪制內容。
device pixel:顯示屏幕的最小物理單位，每個dp包含自己的顏色、亮度。
既然css pixel與device pixel沒有任何關系，那么我們在編寫頁面時怎么設置多寬(用多少的css像素)的網頁才能適配不同的設備(才能覆蓋設備的像素)呢？？？為了解決這個問題，我們再引入一個重要的概念viewport。
B.viewportviewport翻譯過來就是視口的意思。viewport有兩種,一種是layout viewport,還有一種是visual viewport。這兩種viewport的大小都是以css像素進行繪制的。
1.layout viewport:把layout viewport想象成為不會變更大小和形狀的大圖。現在想像你有一個小一些的框架，你通過它來看這張大圖。（可以理解為「管中窺豹」）這個小框架的周圍被不透明的材料所環繞，這掩蓋了你所有的視線，只留這張大圖的一部分給你。你通過這個框架所能看到的大圖的部分就是visual viewport。當你保持框架（縮小）來看整個圖片的時候，你可以不用管大圖，或者你可以靠近一些（放大）只看局部。你也可以改變框架的方向，但是大圖（layout viewport）的大小和形狀永遠不會變。
計算:document.documentElement.clientWidth/Height
2.visual viewport:是頁面當前顯示在屏幕上的部分。用戶可以通過滾動來改變他所看到的頁面的部分，或者通過縮放來改變visual viewport的大小。
計算:window.innerWidth/Height
當你縮小或者放大頁面時，visual viewport的大小會發生變化。當你放大頁面，能看到頁面的內容也就越少，當你縮小頁面能看到的頁面內容也就越多。根本上是因為當你縮小或者放大網頁時，網頁上的css像素就變小或者變大了，但是layout viewport的大小是不變的。也就意味著，當css像素變大時，layout viewport中能容納的單位css像素也就變少了，因此visual viewport的大小就變小了。反之也是一個道理。這個過程中，layout viewport并不會發生任何變化(當然，在窗口的大小發生變化的時候，layout viewport的大小也會隨之變化，窗口越大能夠容納的CSS像素越多，layout viewport也就越大，反之亦然)。如圖
1:1
1:1.3
因此可以把layout viewport想象成為一個虛擬的"窗口"。窗口可大于或小于設備的可視區域(也就是visual viewport)，一般設備默認layout viewport大于visual viewport。這樣不會破壞沒有針對設備的瀏覽器優化的網頁的布局，用戶可以通過平移和縮放來看網頁的其他部分。
部分機型默認layout viewport:
你也可以通過上面給出的document.documentElement.clientWidth/Height在chrome控制臺中進行測試layout viewport的大小。
根據以上的討論我們知道了:
我們寫頁面時是在layout viewport上進行的布局，用的是css像素，可以由document.documentElement.clientWidth/Height計算。(與程序員相關)
各種設備的屏幕分辨率表示的像素是設備像素可以由screen.width/height計算。(與硬件產品相關)
我們觀看頁面時是通過visual viewport進行觀看的，用的也是css像素，可以由window.innerWidth/Height來計算。(與用戶行為相關)
設置layout viewport大小通過上面的討論，我們知道，屏幕的分辨率的設備像素與我們編寫頁面時使用的CSS像素并沒有什么直接關系。而且
問題1.從大的方面來看:首先，我們編寫的CSS是在layout viewport中繪制。其次，從下圖可以看出，設備分辨率和layout viewport也沒有什么直接關系
問題2.從小的方面來看:首先， CSS像素在不放大和縮小的情況下，在任何設備中的1個CSS像素都是一樣大的。其次，不同像素密度的設備，設備屏幕(與像素密度有關)中的1個設備像素的大小是各不相同的。可以知道，在沒有進行任何設置的情況下，單位設備像素與單位css像素也扯不上什么關系。
如果我們想要自己寫出來的頁面在各個設備下都工作良好，就會出現困難？因此為了讓他們之間扯上關系，我們便需要做一些設置。像下面這樣
每個設置對應的意思
這樣設置了之后，我們的layout viewport的大小也就與設備大小相等了(高度上也是相等的)。如圖。既然它們相等那么可以推理得出此時的單位設備像素和單位CSS像素在縮放比例為1的情況下，也就是相等的了。
這時候我們顯示的頁面的屏幕和我們布局頁面的大小是一樣的，那么在進行布局的時候，也就容易了很多。
知道了這樣設置后，對于我們布局來說問題也就不大了。
1.我們在layout viewport上布局，這樣設置后，layout viewport的大小等于設備屏幕的大小
2.不同像素密度的設備的單位設備像素大小的變化也就會同步引起單位CSS像素大小的變化。也就是說，我們在用CSS編寫網頁的時候，在不同像素密度的設備中的css像素大小是不一樣的是變化的。(這里一定要理解)。
但是，這里還有一個問題，iphone6 plus 414這個寬度是從哪里來的呢？
像素密度與轉換系數Android和IOS都會通過轉換系數讓控件適應屏幕的尺寸。而這個轉換系數就和最開始講的像素密度PPI有關。不同的PPI轉化系數不同。如圖
由圖可以知道iphone6 plus的屏幕分辨率為1242*2208，轉化系數為3。
1242/3=414。
414便由此而得，這是設備自身進行的轉化，而我們設置的layout viewport的大小也就等于設備自身轉換后的大小。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115028.html
摘要：設備像素設備分辨率設備像素也叫物理像素。從圖中可以驗證，橫縱方向的設備像素數量恰好是設備獨立像素的倍。像素與設備獨立像素的關系縮放比例就是像素邊長設備獨立像素邊長。因為的寬度沒有改變，無論以什么單位衡量設備像素設備獨立像素還是像素。 這篇文章是我在我的舊博客上發過的文章，最近又碰到這個問題，整理修改了一下發到這里。 像素單位 像素單位有設備像素、邏輯像素和CSS像素3種。 設備像素（d...
摘要：在端，視口指的是瀏覽器的可視區域，其寬度和瀏覽器窗口的寬度保持一致。本文主要討論移動端中的視口。因此，引入了布局視口視覺視口和理想視口三個概念，使得移動端中的視口與瀏覽器寬度不再相關聯。 在 PC 端，視口指的是瀏覽器的可視區域，其寬度和瀏覽器窗口的寬度保持一致。在 CSS 標準文檔中，視口也被稱為初始包含塊，它是所有 CSS 百分比寬度推算的根源，給 CSS 布局限制了一個最大寬度。...
摘要：在端，視口指的是瀏覽器的可視區域，其寬度和瀏覽器窗口的寬度保持一致。本文主要討論移動端中的視口。因此，引入了布局視口視覺視口和理想視口三個概念，使得移動端中的視口與瀏覽器寬度不再相關聯。在 PC 端，視口指的是瀏覽器的可視區域，其寬度和瀏覽器窗口的寬度保持一致。在 CSS 標準文檔中，視口也被稱為初始包含塊，它是所有 CSS 百分比寬度推算的根源，給 CSS 布局限制了一個最大寬度。 而移動...
摘要：屏幕尺寸指屏幕的對角線長度，單位是英寸，英寸厘米。的大小是和設備相關的，在移動端例如手機上，的大小是比端要小的，一般無論手機還是平板，默認的大小都是。總結在添加之后，移動端的寬度會從默認的變成各個設備的。 我們在做響應式布局的時候，肯定要考慮到適配移動端的屏幕，大多數同學也一定復制粘貼過下面這段代碼： 添加了這段代碼以后，我們在移動端看到的顯示效果就非常好，整個頁面不會縮成一團。但...
摘要：當我們想根據屏幕尺寸來自動變化頁面布局時，我們會像這樣做在瀏覽器上調整窗口大小，可以看到網頁的響應能力是乎沒有任何問題的。在正式發布之前，還是先繼續使用標簽吧，如果有興趣的話可以嘗試一下測試版的。 新人翻譯，歡迎轉載~ 英文原文地址：http://bitsofco.de/2015/respove-design-viewport/ 原文例程地址：https://github...
閱讀 3666·2021-10-11 11:09
閱讀 1336·2021-09-24 10:35
閱讀 3422·2021-07-29 13:48
閱讀 460·2019-08-30 13:15
閱讀 2510·2019-08-30 12:53
閱讀 3182·2019-08-30 12:44
閱讀 2710·2019-08-29 16:57
閱讀 957·2019-08-29 12:26
