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

@viewport vs. @media

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

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

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

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

B.像素密度的計(jì)算
像素密度=對(duì)角線分辨率/屏幕尺寸。如下
計(jì)算:勾股定理算出對(duì)角線的分辨率：√(1334²+750²)
對(duì)角線分辨率除以屏幕尺寸：√(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個(gè)像素點(diǎn)的大小相對(duì)于iPhone4來(lái)說(shuō)等于它屏幕的4個(gè)(2x2)像素大小。如下圖。

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

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

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

1:1

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

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

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

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

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

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

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

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

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

最新評(píng)論