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

網(wǎng)頁顯示大小的變化，從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)頁中一個(gè)寬度為100px的按鈕，在手機(jī)上顯示，與在PC上顯示，視覺上相差多少呢？

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

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

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

該文章的第二部分（未出）將會(huì)解釋網(wǎng)頁縮放原理，敬請期待?？┛┛﹡~

理解屏幕參數(shù)

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

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

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

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

iphone5的屏幕密度dpi比iMac的要高三倍左右，換過來說，1px在iphone5上顯示的寬度要是iMac上的1/3左右。

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

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

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

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

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

devicePixelRatio

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

對于iPhone來說，非視網(wǎng)膜設(shè)備的devicePixelRatio為1，視網(wǎng)膜設(shè)備為2。 對Android來說，它們的devicePixelRatio從0.75 - 2不等。見下表。

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

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

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

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

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

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上看起來，好像是iMac上的4.8 2 ~= 10px。