像素密度與CSS3的viewport在移動(dòng)端Web響應(yīng)式布局中的運(yùn)用

何謂 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è)例子來(lái)說(shuō),
- @viewport {
- width: device-width;
- initial-scale: 1;
- }
- @media screen and (min-width: 768px) {
- h1 {
- font-size: 16px;
- }
- }
- @media screen and (max-width: 768px) {
- h1 {
- font-size: 26px;
- }
- }
上面那個(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ú)法理解?
- @viewport {
- width: 768px;
- }
- @media only screen and (width: 768px) {
- h1 {
- font-size: 16px;
- }
- }
- @media only screen and (width: 1200px) {
- h1 {
- font-size: 26px;
- }
- }
那這樣應(yīng)該相當(dāng)好理解了吧!這就是 @viewport 在做的事情,另外,由于 @viewport 有絕對(duì)優(yōu)先權(quán),所以他會(huì)比 @media 還要早執(zhí)行,所以就算這樣寫,也是會(huì)成立的,
- @media only screen and (width: 768px) {
- h1 {
- font-size: 16px;
- }
- }
- @media only screen and (width: 1200px) {
- h1 {
- font-size: 26px;
- }
- }
- @viewport {
- width: 768px;
- }
實(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è)置。像下面這樣
- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
每個(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)換后的大小。
相關(guān)文章
HTML5移動(dòng)端開(kāi)發(fā)中的Viewport標(biāo)簽及相關(guān)CSS用法解析
這篇文章主要介紹了HTML5移動(dòng)端開(kāi)發(fā)中的Viewport標(biāo)簽及相關(guān)CSS用法解析,Viewport常被叫做視口或視區(qū),在移動(dòng)端布局和屏幕適配中有著重要的作用,需要的朋友可以參考下2016-04-15簡(jiǎn)單總結(jié)CSS3中視窗單位Viewport的常見(jiàn)用法
這篇文章主要介紹了CSS3中視窗單位Viewport的常見(jiàn)用法,包括視窗的高度寬度及垂直居中等基本設(shè)定方法,需要的朋友可以參考下2016-02-04網(wǎng)頁(yè)寬度自動(dòng)適應(yīng)手機(jī)屏幕寬度的實(shí)現(xiàn)代碼(viewport)
這篇文章主要介紹了網(wǎng)頁(yè)寬度自動(dòng)適應(yīng)手機(jī)屏幕寬度的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-08-11meta標(biāo)簽中的viewport控制設(shè)備屏幕css
meta標(biāo)簽中的viewport可以控制設(shè)備屏幕的高度、寬度、初始的縮放比例等等,喜歡的朋友可以了解下2014-08-22meta標(biāo)簽中的使用viewport定義屏幕css
meta標(biāo)簽中的viewport可以設(shè)置屏幕的css樣式,包括寬、高、初始縮放比例等等2014-07-28html網(wǎng)頁(yè)中meta viewport屬性說(shuō)明
這篇文章主要介紹了html網(wǎng)頁(yè)中meta viewport屬性說(shuō)明,需要的朋友可以參考下2014-05-07- 這篇文章主要介紹了html的meta viewport屬性說(shuō)明,需要的朋友可以參考下2014-04-16
HTML meta viewport屬性詳細(xì)說(shuō)明
viewport并非只是ios上的獨(dú)有屬性,在android、winphone上同樣也有viewport,下面為大家詳細(xì)介紹下HTML meta viewport2014-03-12- 隨著高端手機(jī)(Andriod,Iphone,Ipod,WinPhone等)的盛行,移動(dòng)互聯(lián)應(yīng)用開(kāi)發(fā)也越來(lái)越受到人們的重視,用html5開(kāi)發(fā)移動(dòng)應(yīng)用是最好的選擇。然而,每一款手機(jī)有不同的分辨率,不2013-12-02
- 在需要調(diào)整設(shè)備瀏覽器的viewport時(shí),我們通常在HTML中使用來(lái)解決。但是令人意想不到的是,viewport meta標(biāo)簽并不具有“規(guī)范性”,即它不是W3C的正式標(biāo)準(zhǔn),也非Web標(biāo)準(zhǔn)2013-11-10