移動(dòng)Web開(kāi)發(fā)基礎(chǔ)：設(shè)備像素比是什么?

　　在傳統(tǒng)的PC端和早期的普通手機(jī)中，屏幕上的一個(gè)像素和網(wǎng)頁(yè)CSS中的一個(gè)像素是完全對(duì)應(yīng)的。但隨著技術(shù)的進(jìn)步，為了提高屏幕顯示的細(xì)膩度，高分辨率的屏幕開(kāi)始流行，一塊屏幕可以顯示更多的像素。但隨之產(chǎn)生了一個(gè)問(wèn)題，就是同一個(gè)網(wǎng)頁(yè)在不同分辨率的屏幕下顯示效果會(huì)有大小差異，因?yàn)镃SS中使用的像素是一個(gè)固定值，它不會(huì)因?yàn)槠聊环直媛识l(fā)生改變。例如，在屏幕尺寸相同的情況下，一個(gè)12px的文字在低分辨率的屏幕中尺寸很大，但在高分辨率的屏幕中，文字會(huì)顯得特別小，不利于瀏覽。

　　為了解決這個(gè)問(wèn)題，高分辨率設(shè)備的操作系統(tǒng)會(huì)對(duì)網(wǎng)頁(yè)畫(huà)面進(jìn)行縮放，讓網(wǎng)頁(yè)內(nèi)容大小看上去比較舒適，而網(wǎng)頁(yè)中使用的像素并不做修改。尤其是網(wǎng)頁(yè)中的文字，在高分辨率屏幕下的顯示效果會(huì)更加細(xì)膩。因此，在高分辨率屏幕中，CSS使用的像素單位和屏幕顯示的像素并不是一對(duì)一的，將屏幕像素除以CSS像素得到的就是設(shè)備像素比。

　　例如，當(dāng)設(shè)備像素比為4時(shí)，CSS像素和屏幕像素的轉(zhuǎn)換關(guān)系如圖2-14所示。

　　圖2-14 CSS像素和屏幕像素的轉(zhuǎn)換關(guān)系

　　需要注意的是，對(duì)于網(wǎng)頁(yè)中的文字和渲染出來(lái)的簡(jiǎn)單圖形，系統(tǒng)在轉(zhuǎn)換時(shí)會(huì)確保畫(huà)面細(xì)膩;但是對(duì)于自己添加的圖片，在按照設(shè)備像素比放大后會(huì)變得模糊。為了解決這個(gè)問(wèn)題，可以使用二倍圖來(lái)提高圖片顯示的質(zhì)量。