資訊專(zhuān)欄INFORMATION COLUMN
摘要：在移動(dòng)端開(kāi)發(fā)的過(guò)程中大家都會(huì)發(fā)現(xiàn)，移動(dòng)端的顯示一般與桌面端的不一樣。像素講了這么多概念，仿佛還是沒(méi)有很好地解釋文章開(kāi)頭的問(wèn)題。上面所指出的這種抽象單位稱(chēng)為設(shè)備無(wú)關(guān)像素。
在移動(dòng)端開(kāi)發(fā)的過(guò)程中大家都會(huì)發(fā)現(xiàn)，移動(dòng)端的顯示一般與桌面端的不一樣。比如在iphone6上顯示一個(gè)1334x750像素大小塊狀元素，雖然在蘋(píng)果官網(wǎng)上iphone6標(biāo)稱(chēng)的屏幕像素密度是1334x750規(guī)格，但是我們卻發(fā)現(xiàn)這個(gè)1334x750像素大小的塊狀元素卻不能鋪滿整個(gè)屏幕。那到底是為什么呢？下面從幾個(gè)方面來(lái)作探討。
像素密度（PPI）PPI(Pixel Per Inch)，即表示每英寸有多少像素，類(lèi)似于人口密度和建筑密度，如下圖舉例了幾種PPI的表示。
以iphone6為例，一般像素密度的計(jì)算公式為：
Math.sqrt(1366*1366 + 640*640)
但是要計(jì)算這個(gè)PPI，那么我們先要知道設(shè)備的屏幕上到底有多少個(gè)像素，也就是Pixel Per Inch 中的第一個(gè)Pixel。
設(shè)備像素（DP）&& 設(shè)備像素比（DPR）設(shè)備像素（Device pixel），也稱(chēng)物理像素（Physical pixel），也就是本文一開(kāi)始提到iphone6的屏幕規(guī)格。像素密度中所指的像素就是設(shè)備像素，對(duì)于一般的顯示設(shè)備來(lái)說(shuō)，一個(gè)像素對(duì)應(yīng)著屏幕上的一個(gè)發(fā)光點(diǎn)，因此PPI也稱(chēng)為DPI（dots per inch），但是這僅在顯示設(shè)備上才等價(jià)，比如在打印機(jī)上就不一樣了。
由于市面上每一臺(tái)手機(jī)的屏幕規(guī)格不一樣，有的是720P，有的是1080P，甚者是2K等等，這些設(shè)備的屏幕有些像素多，有些像素少，如果同樣顯示一個(gè)像素的話，則會(huì)出現(xiàn)像以下的情況：
越高PPI的屏幕，顯示一個(gè)像素點(diǎn)的面積就越小，一張由4x4個(gè)像素點(diǎn)組成的圖顯示在PPI為64的屏幕上，那么換到256PPI的屏幕上顯示則會(huì)縮小為原來(lái)大小的一半。
反過(guò)來(lái)，如果要在PPI為256的屏幕上顯示效果與PPI為64的屏幕一樣，那么得要把圖片放大2倍。
因此配有高清屏幕的手機(jī)，廠商為了其設(shè)備的可用性，即圖標(biāo)和文字可以被正確識(shí)別和準(zhǔn)確點(diǎn)擊，就必須保證各類(lèi)素材在其設(shè)備上的顯示與標(biāo)清設(shè)備一樣，而這個(gè)解決方法就是把所有尺寸都放大若干倍。這個(gè)放大比例就叫作設(shè)備像素比(Device Pixel Ratio, DPR)，一般DPR對(duì)應(yīng)著下面這個(gè)表：
| ? | ldpi | mdpi | hdpi | xhdpi |
|---|---|---|---|---|
| ppi | 120 | 160 | 240 | 320 |
| dpr | 0.75 | 1.0 | 1.5 | 2.0 |
因此高清設(shè)備上應(yīng)該配有高清圖片顯示，不然圖片在高清設(shè)備上放大后沒(méi)有足夠的像素顯示其細(xì)節(jié)，那么這張圖片就會(huì)變得看起來(lái)很模糊。
CSS像素講了這么多概念，仿佛還是沒(méi)有很好地解釋文章開(kāi)頭的問(wèn)題。下面討論完CSS像素后估計(jì)大家會(huì)有一個(gè)比較清晰的概念。
我們通宵在寫(xiě)CSS的時(shí)候會(huì)用到像素單位px，但是這個(gè)像素單位并不一直是與設(shè)備像素一一對(duì)應(yīng)，也就是說(shuō)在CSS中1px（像素）不是對(duì)應(yīng)著設(shè)備屏幕中的一個(gè)像素點(diǎn)。為了與設(shè)備像素區(qū)別，CSS中所指的像素px我們一般稱(chēng)為CSS像素。也就是說(shuō)CSS像素是一個(gè)虛擬的、相對(duì)的單位。
例如在頁(yè)面上畫(huà)一個(gè)300px寬的塊元素，在一般的顯示器下它只會(huì)占屏幕的一部分，但如果我們手動(dòng)地去放大頁(yè)面，很快這個(gè)塊狀元素也會(huì)充滿整個(gè)頁(yè)面。由此說(shuō)明，一般情況下CSS像素與系統(tǒng)分辨率下的像素大小相等，即在標(biāo)清設(shè)備中，一個(gè)CSS像素應(yīng)該是與一個(gè)設(shè)備像素大小相等的。但是是高清設(shè)備或者用戶(hù)縮放的過(guò)程中，一個(gè)CSS像素也有可能等于多個(gè)設(shè)備像素。
舉另外一個(gè)例子，在移動(dòng)原生應(yīng)用開(kāi)發(fā)中，如果必須以一個(gè)設(shè)備像素為單位進(jìn)行開(kāi)發(fā)，那將會(huì)是一件非常痛苦的事，因?yàn)椴皇敲恳慌_(tái)移動(dòng)設(shè)備的系統(tǒng)分辨率都是對(duì)應(yīng)著一個(gè)設(shè)備像素，有的是1:2，有的是1:2.46，正是因?yàn)橛羞@種差異，在安卓開(kāi)發(fā)中會(huì)有例如dp,dt這種單位（在iOS中會(huì)有pt單位），當(dāng)我們給一個(gè)元素定義大小時(shí)，只需要給定一個(gè)dp值，系統(tǒng)將會(huì)根據(jù)這個(gè)值再與系統(tǒng)分辨率與設(shè)備像素的比值（即DPR）進(jìn)行換算，最終計(jì)算出顯示在屏幕上的實(shí)際設(shè)備像素。
上面所指出的dp這種抽象單位稱(chēng)為設(shè)備無(wú)關(guān)像素（device independent pixel）。當(dāng)然CSS像素也屬于設(shè)備無(wú)關(guān)像素，我們?cè)趯?xiě)CSS像素的時(shí)候，不用關(guān)心一個(gè)CSS像素對(duì)應(yīng)著多少個(gè)設(shè)備像素，系統(tǒng)會(huì)自動(dòng)地根據(jù)DPR來(lái)幫我們換算好。我們要關(guān)心的只是如何保證網(wǎng)頁(yè)元素因?yàn)橄到y(tǒng)換算而導(dǎo)致被放大的時(shí)候下，還能清晰地展示在設(shè)備上。
視口（Viewport）正常來(lái)說(shuō)，在移動(dòng)端打開(kāi)一個(gè)頁(yè)面，如果瀏覽器先會(huì)以正常的比例來(lái)渲染頁(yè)面，然后再自動(dòng)地設(shè)置一個(gè)比例來(lái)縮放頁(yè)面，目的是為了讓內(nèi)容更好地展示出來(lái)，即頁(yè)面內(nèi)容剛好鋪滿整個(gè)手機(jī)屏幕，當(dāng)然如果頁(yè)面沒(méi)有禁止掉用戶(hù)縮放的話，你也可以用兩個(gè)手指把頁(yè)面縮放回原始的比例。這整個(gè)過(guò)程就是通過(guò)視口（viewport）來(lái)實(shí)現(xiàn)的，原始頁(yè)面渲染好后通過(guò)視口縮放使得與系統(tǒng)寬度一樣，從而可以完整地展示頁(yè)面。
(圖片來(lái)自tgideas團(tuán)隊(duì)博客)
我們可以通過(guò)在content中添加inital-scale屬性來(lái)控制渲染時(shí)視窗的縮放比例，把它設(shè)置為1則無(wú)縮放。
我們也可以定義device-width屬性來(lái)控制viewport的寬度
一般在移動(dòng)開(kāi)發(fā)中我們會(huì)設(shè)置不允許用戶(hù)縮放，并把最大、最小縮放比設(shè)為1
總結(jié)（Summary）
通過(guò)連續(xù)幾天的翻閱資料與探索，終于完整地對(duì)移動(dòng)開(kāi)發(fā)最入門(mén)的地方有了準(zhǔn)確的理解，之前也只是一直把meta里的代碼直接復(fù)制過(guò)來(lái)用就是了，一直沒(méi)去弄清楚，這次趁著有空并且手上剛好有相關(guān)的資料，一并整體地走一遍，最后記錄成此文檔，希望對(duì)日后甚至?xí)?duì)大家有幫助。
參與資料：
1.深入了解viewport和px
2.高性能響應(yīng)式Web開(kāi)發(fā)實(shí)戰(zhàn)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112844.html
摘要：在移動(dòng)端開(kāi)發(fā)的過(guò)程中大家都會(huì)發(fā)現(xiàn)，移動(dòng)端的顯示一般與桌面端的不一樣。像素講了這么多概念，仿佛還是沒(méi)有很好地解釋文章開(kāi)頭的問(wèn)題。上面所指出的這種抽象單位稱(chēng)為設(shè)備無(wú)關(guān)像素。 在移動(dòng)端開(kāi)發(fā)的過(guò)程中大家都會(huì)發(fā)現(xiàn)，移動(dòng)端的顯示一般與桌面端的不一樣。比如在iphone6上顯示一個(gè)1334x750像素大小塊狀元素，雖然在蘋(píng)果官網(wǎng)上iphone6標(biāo)稱(chēng)的屏幕像素密度是1334x750規(guī)格，但是我們卻發(fā)現(xiàn)...
摘要：真的是給我們新手學(xué)習(xí)移動(dòng)端適配造成不少困惑英語(yǔ)真的很重要呀。細(xì)節(jié)高清屏上的處理其實(shí)并不是所有做移動(dòng)端適配的人都一定會(huì)遇到這個(gè)問(wèn)題。 一次搞清楚移動(dòng)端這幾個(gè)坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準(zhǔn)備什么樣的設(shè)計(jì)稿 三、rem方案的原理和細(xì)節(jié) 高清屏上,位圖的處理 高清屏上,關(guān)于border: 1px的處理 移動(dòng)端屏幕的自動(dòng)適配的處理 移動(dòng)端屏幕上字體大小的處理...
摘要：真的是給我們新手學(xué)習(xí)移動(dòng)端適配造成不少困惑英語(yǔ)真的很重要呀。細(xì)節(jié)高清屏上的處理其實(shí)并不是所有做移動(dòng)端適配的人都一定會(huì)遇到這個(gè)問(wèn)題。 一次搞清楚移動(dòng)端這幾個(gè)坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準(zhǔn)備什么樣的設(shè)計(jì)稿 三、rem方案的原理和細(xì)節(jié) 高清屏上,位圖的處理 高清屏上,關(guān)于border: 1px的處理 移動(dòng)端屏幕的自動(dòng)適配的處理 移動(dòng)端屏幕上字體大小的處理...
摘要：需要注意，上面的尺寸都是屏幕對(duì)角線的長(zhǎng)度英寸縮寫(xiě)為在荷蘭語(yǔ)中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機(jī)尺寸為手機(jī)對(duì)角線的長(zhǎng)度，我們通常使用如下的方法計(jì)算的為，那它每英寸約含有個(gè)物理像素點(diǎn)。導(dǎo)讀 移動(dòng)端適配，是我們?cè)陂_(kāi)發(fā)中經(jīng)常會(huì)遇到的，這里面可能會(huì)遇到非常多的問(wèn)題： 1px問(wèn)題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問(wèn)題 ... ...
閱讀 3523·2023-04-25 23:25
閱讀 2193·2021-11-12 10:36
閱讀 2869·2019-08-30 12:47
閱讀 2129·2019-08-29 18:45
閱讀 518·2019-08-29 17:28
閱讀 1858·2019-08-29 17:15
閱讀 1777·2019-08-29 16:05
閱讀 1501·2019-08-29 14:17
