何謂 viewport
根據 w3c 對于 CSS Device Adaptation 的解釋，他大致上是在做這些事情，
1.根據裝置的顯示區(qū)域來展示文件
2.放大或縮小文件，來符合或設定上給予裝置的可視區(qū)域
3.允許設定或初始化縮放的級別，或是其他規(guī)則
實際上，他是跟著顯示裝置在運作的，所以他的所有設定都跟顯示裝置有關，而這里的顯示裝置跟 Media Query 里面的 screen, projection, print, tv, tty, aural, handheld, embossed, braille 這幾樣東西是不太一樣的（話說，我上次的文章似乎沒提到這一塊）。 雖然，Media Query 上述那幾項規(guī)則設定，很明顯都與其顯示的裝置有關，但是，他們的目的不同，操作的方式也不一樣。
歐，你說 print 為什么也算顯示裝置，因為對打印機而言，印出來也是顯示的一種（但是印出來有 @page 可以用喔！

@viewport vs. @media

上面那個 @viewport 與 @media 初始化設定中是無關的。這樣理解嗎？什么？不行？那先看一下步驟，
1.viewport 規(guī)則套用，寬度設定為 device-width，且初始縮放數值為 1
2.@media 套用于 screen 與其條件 (min-width: 768px)
3.@media 套用于 screen 與其條件 (max-width: 768px)
對于我們的視角來說，device-width 可以解釋為我們所看見的裝置的寬度，而 768px 這件事情，則是告訴該顯示的本文遇到這個條件時，應該要顯示的結果。所以，條件會顯示的結果是看 @media 來決定。舉個例子來解釋這個例子，
1.假設我們的裝置 device-width 是 800px
2.那么第一個條件會成立
疑？無法理解？

那這樣應該相當好理解了吧！這就是 @viewport 在做的事情，另外，由于 @viewport 有絕對優(yōu)先權，所以他會比 @media 還要早執(zhí)行，所以就算這樣寫，也是會成立的，

實例
首先舉個例子，iphone6s的像素分辨率為1334x750,326ppi,4.7英寸。如圖
下面我們一個一個來解釋。

像素密度
A.定義
326ppi代表的就是像素密度(pixels per inch),指的是每英寸的長度上排列的像素點數量。
a.屏幕分辨率
首先1334x750，代表的是屏幕分辨率，也就是說iPhone6s的屏幕是由縱向像素1334*橫向像素750個像素點組成。單位pixel。
b.物理尺寸
如圖可以知道，4.7英寸也就指的是iPhone6s屏幕對角線的物理長度。1英寸是一個固定長度，等于2.54厘米。

B.像素密度的計算
像素密度=對角線分辨率/屏幕尺寸。如下
計算:勾股定理算出對角線的分辨率：√(1334²+750²)
對角線分辨率除以屏幕尺寸：√(1334²+750²)/4.7≈440dpi。

C.直觀感受理解像素密度
像素密度越高，代表屏幕顯示效果越精細。Retina屏比普通屏清晰很多，就是因為Retina屏幕像素密度高。最明顯的就是iPhone 3GS和iPhone 4的區(qū)別。屏幕尺寸一樣因為屏幕分辨率相差一倍所以屏幕像素密度也相差一倍。顯示效果如下

如圖看出iPhone4顯示要比iPhone 3gs清晰的多。根本原因是因為iPhone3gs的1個像素點的大小相對于iPhone4來說等于它屏幕的4個(2x2)像素大小。如下圖。

注意注意注意:這里的1像素指的是物理設備的1個像素點。也就是說不同像素密度的物理設備的一個像素點的大小是不一樣的。也就意味著對于物理設備屏幕的單個像素點的大小是不是一個固定的大小。用稍微專業(yè)一點的話來說就是，單個的設備像素的大小是不定的。

重要概念理解
上面我們討論的是關于物理設備的像素密度(再次強調:這里的像素就是物理像素或者說是設備像素，對應于像素密度不同的設備具體像素點的大小都是不一樣大的。像素密度越大，像素點越小，顯示的細節(jié)就越多越豐富。反之則情況剛好相反)。那么接下來我們要說的幾個重要概念是什么呢？我們先從css像素與設備像素開始討論。
A.css像素和設備像素
首先我們需要明確一點:在我們編寫CSS的時候的px和設備自身的px是沒有任何關系的。
css pixel:瀏覽器使用的抽象單位，主要用來在網頁上繪制內容。
device pixel:顯示屏幕的最小物理單位，每個dp包含自己的顏色、亮度。
既然css pixel與device pixel沒有任何關系，那么我們在編寫頁面時怎么設置多寬(用多少的css像素)的網頁才能適配不同的設備(才能覆蓋設備的像素)呢？？？為了解決這個問題，我們再引入一個重要的概念viewport。

B.viewport
viewport翻譯過來就是視口的意思。viewport有兩種,一種是layout viewport,還有一種是visual viewport。這兩種viewport的大小都是以css像素進行繪制的。
1.layout viewport:把layout viewport想象成為不會變更大小和形狀的大圖?，F(xiàn)在想像你有一個小一些的框架，你通過它來看這張大圖。（可以理解為「管中窺豹」）這個小框架的周圍被不透明的材料所環(huán)繞，這掩蓋了你所有的視線，只留這張大圖的一部分給你。你通過這個框架所能看到的大圖的部分就是visual viewport。當你保持框架（縮小）來看整個圖片的時候，你可以不用管大圖，或者你可以靠近一些（放大）只看局部。你也可以改變框架的方向，但是大圖（layout viewport）的大小和形狀永遠不會變。
計算:document.documentElement.clientWidth/Height
2.visual viewport:是頁面當前顯示在屏幕上的部分。用戶可以通過滾動來改變他所看到的頁面的部分，或者通過縮放來改變visual viewport的大小。
計算:window.innerWidth/Height
當你縮小或者放大頁面時，visual viewport的大小會發(fā)生變化。當你放大頁面，能看到頁面的內容也就越少，當你縮小頁面能看到的頁面內容也就越多。根本上是因為當你縮小或者放大網頁時，網頁上的css像素就變小或者變大了，但是layout viewport的大小是不變的。也就意味著，當css像素變大時，layout viewport中能容納的單位css像素也就變少了，因此visual viewport的大小就變小了。反之也是一個道理。這個過程中，layout viewport并不會發(fā)生任何變化(當然，在窗口的大小發(fā)生變化的時候，layout viewport的大小也會隨之變化，窗口越大能夠容納的CSS像素越多，layout viewport也就越大，反之亦然)。如圖

1:1

1:1.3
因此可以把layout viewport想象成為一個虛擬的"窗口"。窗口可大于或小于設備的可視區(qū)域(也就是visual viewport)，一般設備默認layout viewport大于visual viewport。這樣不會破壞沒有針對設備的瀏覽器優(yōu)化的網頁的布局，用戶可以通過平移和縮放來看網頁的其他部分。
部分機型默認layout viewport:

你也可以通過上面給出的document.documentElement.clientWidth/Height在chrome控制臺中進行測試layout viewport的大小。

C.小總結1
根據以上的討論我們知道了:
我們寫頁面時是在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像素也扯不上什么關系。

設置viewport
如果我們想要自己寫出來的頁面在各個設備下都工作良好，就會出現(xiàn)困難？因此為了讓他們之間扯上關系，我們便需要做一些設置。像下面這樣

每個設置對應的意思

這樣設置了之后，我們的layout viewport的大小也就與設備大小相等了(高度上也是相等的)。如圖。既然它們相等那么可以推理得出此時的單位設備像素和單位CSS像素在縮放比例為1的情況下，也就是相等的了。
這時候我們顯示的頁面的屏幕和我們布局頁面的大小是一樣的，那么在進行布局的時候，也就容易了很多。

小總結2:
知道了這樣設置后，對于我們布局來說問題也就不大了。
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的大小也就等于設備自身轉換后的大小。

最新評論