網(wǎng)頁(yè)顯示大小的變化，從PC到Mobile-第一部分

網(wǎng)頁(yè)顯示大小的變化，從PC到Mobile-第一部分

原作者：melon
原文地址：http://melonh.com/css/2014/03/27/the-size-of-page-from-pc-to-mobile.html

手機(jī)、pad等移動(dòng)設(shè)備已成為生活中必不可缺少一部分。與傳統(tǒng)PC相比，這類設(shè)備的尺寸小很多, 分辨率也有略微差別。 那么網(wǎng)頁(yè)中一個(gè)寬度為100px的按鈕，在手機(jī)上顯示，與在PC上顯示，視覺(jué)上相差多少呢？

網(wǎng)頁(yè)大小的變化要從兩個(gè)方面來(lái)分析：

1. 屏幕參數(shù)dpi, dip
2. 網(wǎng)頁(yè)縮放

這篇文章先在網(wǎng)頁(yè)縮放比例為100%的基礎(chǔ)上解釋屏幕參數(shù)對(duì)網(wǎng)頁(yè)顯示大小的影響。

該文章的第二部分（未出）將會(huì)解釋網(wǎng)頁(yè)縮放原理，敬請(qǐng)期待。咯咯咯~~

理解屏幕參數(shù)

1. 屏幕尺寸
   意義：用戶屏幕的整體大小。數(shù)值為屏幕對(duì)角線長(zhǎng)度。
   eg: iphone5 4inch，是指iphone5對(duì)角線的長(zhǎng)度為4inc

2. 分辨率(Resolution)
   意義：用戶屏幕有多少個(gè)物理像素（可以發(fā)光的點(diǎn)）。
   eg. 1980*1080分辨率，代表水平方向有1980個(gè)像素長(zhǎng)度，垂直方向有1080個(gè)像素長(zhǎng)度。

3. dpi(dots per inch)/ppi(pixel per inch)
   意義：每英寸有多少個(gè)像素點(diǎn)。即屏幕像素密度。

移動(dòng)設(shè)備屏幕參數(shù)帶來(lái)得問(wèn)題

iphone5的屏幕密度dpi比iMac的要高三倍左右，換過(guò)來(lái)說(shuō)，1px在iphone5上顯示的寬度要是iMac上的1/3左右。

于是帶來(lái)了一個(gè)問(wèn)題，同樣像素寬度的元素，在手機(jī)上看起來(lái)比PC上小很多。16px的字體，在手機(jī)上看好像pc上的5px，難以閱讀！

dip—不依賴設(shè)備的長(zhǎng)度單位

為了解決上面的問(wèn)題，Android提出了dip（device independent pixel)的概念，IOS上也有類似的概念。

dip(device independent pixel), 也叫dp
意義：一個(gè)長(zhǎng)度單位。1dp約等于1/160英寸。1dp代表的長(zhǎng)度由屏幕廠商根據(jù)具體情況設(shè)定。

通常Android開(kāi)發(fā)者設(shè)置元素大小時(shí)不使用px作為單位。而是使用dp(即dip)作為單位。那么在不同設(shè)備上，顯示的大小都會(huì)差不多。

devicePixelRatio

devicePixelRatio = 1dp的寬度 / 1px的寬度。
意義：它的值帶表1dp長(zhǎng)度單位內(nèi)有多少個(gè)物理像素。

對(duì)于iPhone來(lái)說(shuō)，非視網(wǎng)膜設(shè)備的devicePixelRatio為1，視網(wǎng)膜設(shè)備為2。 對(duì)Android來(lái)說(shuō)，它們的devicePixelRatio從0.75 - 2不等。見(jiàn)下表。

dip長(zhǎng)度的設(shè)定（我自己的理解）

1dp代表的長(zhǎng)度，是由屏幕廠商根據(jù)屏幕參數(shù)決定的。iphone5的一個(gè)物理像素的寬度約為pc上的1/3，因此一個(gè)大小為12px的字體在iphone5上看比PC上只有三分之一的大小，這樣必須看不見(jiàn)！因此Android開(kāi)發(fā)者都會(huì)使用dp作為單位，我們希望12dp的字體在手機(jī)上能看的清，如果12dp的長(zhǎng)度有24個(gè)物理像素，那字體應(yīng)該看起來(lái)約為pc上的2/3。恩，這樣可以接受，很好，那就1dp長(zhǎng)度內(nèi)有2個(gè)px吧，于是devicePixelRatio等于2。

1dp的長(zhǎng)度在各個(gè)設(shè)備下略有不同，但都約為1/160英寸，因此16dp的長(zhǎng)度在各個(gè)屏幕下看大小略微不同，但也差不多。

移動(dòng)端瀏覽器的秘密優(yōu)化-單位轉(zhuǎn)換

在進(jìn)行Web開(kāi)發(fā)時(shí)，我們通常還是使用百分比，或者px作為單位。但是移動(dòng)端瀏覽器在渲染時(shí)，會(huì)根據(jù)devicePixelRatio轉(zhuǎn)換長(zhǎng)度。如iphone5的devicePixelRatio為2，網(wǎng)頁(yè)中得一個(gè)字體為12px，那么在手機(jī)上渲染時(shí)，瀏覽器會(huì)重新計(jì)算這個(gè)字體的大小為2*12=24px。因此在字體看起來(lái)差不多大。

iphone5 vs iMac，實(shí)例分析

iphone5的dpi為326, iMac的dpi為102, 因此iphone5上16px的大小為iMac上的102/326 16 ~= 4.8，16px的字體如果不進(jìn)行單位轉(zhuǎn)換，在iphone5上看，好像iMac上的4.8px大。iphone5的devicePixelRatio為2，移動(dòng)端瀏覽器渲染時(shí)，將16px的單位轉(zhuǎn)為16dp，因此在iphone上看起來(lái)，好像是iMac上的4.8 2 ~= 10px。