CSS中的1px 并不等于設(shè)備的1像素。我們使用Axure 生成的原型是由HTML+CSS+JavaScript 構(gòu)成的。在CSS中,通常使用px(pixel的縮寫,即像素)作為單位,在桌面瀏覽器中,CSS的1px往往都是對(duì)應(yīng)著電腦屏幕的一個(gè)物理像素,這就是造成我們產(chǎn)生誤解的原因:CSS中的px就是設(shè)備的物理像素。但實(shí)際情況并非如此,CSS中的像素只是一個(gè)抽象的單位,在不同的設(shè)備或不同的環(huán)境中,CSS中的1px 所代表的設(shè)備物理像素是不同的。在為桌面瀏覽器設(shè)計(jì)的網(wǎng)頁中,這樣理解是正確的,但在移動(dòng)設(shè)備上并非如此,各位讀者必須清楚這一點(diǎn)。在較早期的移動(dòng)設(shè)備中,屏幕的像素密度都比較低,比如iPhone3,它的屏幕分辨率是320×480像素。在iPhone3上,CSS中1px確實(shí)是等于一個(gè)屏幕物理像素的。但是隨著技術(shù)的發(fā)展,移動(dòng)設(shè)備的屏幕像素密度越來越高,從iPhone4開始,蘋果公司便推出了Retina 屏幕,分辨率提高了一倍,變成640×960像素,但屏幕尺寸卻沒變化(在大家使用iPhone4截取屏幕時(shí)就能深切體會(huì)到這一點(diǎn),屏幕截圖尺寸是640×960像素,截圖的尺寸比視覺上看到的屏幕尺寸大出了一倍)。也就是說,在同樣大小的屏幕上,像素卻高出了一倍。此時(shí), CSS中1px就等于兩個(gè)物理像素。
其他品牌的移動(dòng)設(shè)備也是這個(gè)道理。例如,安卓設(shè)備根據(jù)屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi 等不同的等級(jí),分辨率也是五花八門。安卓設(shè)備上的CSS中1px相當(dāng)于多少個(gè)屏幕物理像素,也因設(shè)備的不同而不同,沒有一個(gè)標(biāo)準(zhǔn)。
還有一個(gè)因素,昆明網(wǎng)站制作小編認(rèn)為也會(huì)引起CSS中px的變化,那就是用戶縮放。例如,當(dāng)用戶把頁面放大一倍,那么CSS中1px 所代表的物理像素也會(huì)增加一倍;反之把頁面縮小一倍,CSS中1px 所代表的物理像素也會(huì)減少一倍。
看到這里,相信大家心中的謎團(tuán)已經(jīng)解開了。大家根據(jù)本節(jié)內(nèi)容的講解也可以深入理解“包含視圖接口標(biāo)記”(Include Viewport Tag)是何含義了。
關(guān)于移動(dòng)設(shè)備中Viewport的專業(yè)文獻(xiàn),各位讀者可參考PPK的文章,受篇幅所限,這里不再贅述,請(qǐng)參考網(wǎng)址:http://www.quirksmode.org/。
為了方便各位讀者更加清晰、便捷地設(shè)計(jì)適用于不同屏幕尺寸的APP 原型,昆明網(wǎng)站建設(shè)小編在附錄中列出了APP 原型尺寸速查表。
當(dāng)前文章標(biāo)題:CSS中的px與移動(dòng)設(shè)備中的px
當(dāng)前URL:http://www.gtalker.cn/news/wzzz/3546.html
上一篇:Viewport概述