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

@viewport vs. @media

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

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

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

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

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

C.直觀感受理解像素密度
像素密度越高，代表屏幕顯示效果越精細(xì)。Retina屏比普通屏清晰很多，就是因?yàn)镽etina屏幕像素密度高。最明顯的就是iPhone 3GS和iPhone 4的區(qū)別。屏幕尺寸一樣因?yàn)槠聊环直媛氏嗖钜槐端云聊幌袼孛芏纫蚕嗖钜槐?。顯示效果如下

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

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

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

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

1:1

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

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

C.小總結(jié)1
根據(jù)以上的討論我們知道了:
我們寫頁面時是在layout viewport上進(jìn)行的布局，用的是css像素，可以由document.documentElement.clientWidth/Height計算。(與程序員相關(guān))
各種設(shè)備的屏幕分辨率表示的像素是設(shè)備像素可以由screen.width/height計算。(與硬件產(chǎn)品相關(guān))
我們觀看頁面時是通過visual viewport進(jìn)行觀看的，用的也是css像素，可以由window.innerWidth/Height來計算。(與用戶行為相關(guān))
設(shè)置layout viewport大小
通過上面的討論，我們知道，屏幕的分辨率的設(shè)備像素與我們編寫頁面時使用的CSS像素并沒有什么直接關(guān)系。而且
問題1.從大的方面來看:首先，我們編寫的CSS是在layout viewport中繪制。其次，從下圖可以看出，設(shè)備分辨率和layout viewport也沒有什么直接關(guān)系
問題2.從小的方面來看:首先， CSS像素在不放大和縮小的情況下，在任何設(shè)備中的1個CSS像素都是一樣大的。其次，不同像素密度的設(shè)備，設(shè)備屏幕(與像素密度有關(guān))中的1個設(shè)備像素的大小是各不相同的?？梢灾溃跊]有進(jìn)行任何設(shè)置的情況下，單位設(shè)備像素與單位css像素也扯不上什么關(guān)系。

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

每個設(shè)置對應(yīng)的意思

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

小總結(jié)2:
知道了這樣設(shè)置后，對于我們布局來說問題也就不大了。
1.我們在layout viewport上布局，這樣設(shè)置后，layout viewport的大小等于設(shè)備屏幕的大小
2.不同像素密度的設(shè)備的單位設(shè)備像素大小的變化也就會同步引起單位CSS像素大小的變化。也就是說，我們在用CSS編寫網(wǎng)頁的時候，在不同像素密度的設(shè)備中的css像素大小是不一樣的是變化的。(這里一定要理解)。
但是，這里還有一個問題，iphone6 plus 414這個寬度是從哪里來的呢？

像素密度與轉(zhuǎn)換系數(shù)
Android和IOS都會通過轉(zhuǎn)換系數(shù)讓控件適應(yīng)屏幕的尺寸。而這個轉(zhuǎn)換系數(shù)就和最開始講的像素密度PPI有關(guān)。不同的PPI轉(zhuǎn)化系數(shù)不同。如圖

由圖可以知道iphone6 plus的屏幕分辨率為1242*2208，轉(zhuǎn)化系數(shù)為3。
1242/3=414。
414便由此而得，這是設(shè)備自身進(jìn)行的轉(zhuǎn)化，而我們設(shè)置的layout viewport的大小也就等于設(shè)備自身轉(zhuǎn)換后的大小。

最新評論