网页显示大小的变化，从PC到Mobile-第一部分

网页显示大小的变化，从PC到Mobile-第一部分

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

手机、pad等移动设备已成为生活中必不可缺少一部分。与传统PC相比，这类设备的尺寸小很多, 分辨率也有略微差别。 那么网页中一个宽度为100px的按钮，在手机上显示，与在PC上显示，视觉上相差多少呢？

网页大小的变化要从两个方面来分析：

1. 屏幕参数dpi, dip
2. 网页缩放

这篇文章先在网页缩放比例为100%的基础上解释屏幕参数对网页显示大小的影响。

该文章的第二部分（未出）将会解释网页缩放原理，敬请期待。咯咯咯~~

理解屏幕参数

1. 屏幕尺寸
   意义：用户屏幕的整体大小。数值为屏幕对角线长度。
   eg: iphone5 4inch，是指iphone5对角线的长度为4inc

2. 分辨率(Resolution)
   意义：用户屏幕有多少个物理像素（可以发光的点）。
   eg. 1980*1080分辨率，代表水平方向有1980个像素长度，垂直方向有1080个像素长度。

3. dpi(dots per inch)/ppi(pixel per inch)
   意义：每英寸有多少个像素点。即屏幕像素密度。

移动设备屏幕参数带来得问题

以iphone5和iMac为例：	手机\参数	尺寸（英寸）	分辨率	屏幕密度dpi
iphone5	4	1136 * 640	326
iMac	21.5	1980 * 1080	102

iphone5的屏幕密度dpi比iMac的要高三倍左右，换过来说，1px在iphone5上显示的宽度要是iMac上的1/3左右。

于是带来了一个问题，同样像素宽度的元素，在手机上看起来比PC上小很多。16px的字体，在手机上看好像pc上的5px，难以阅读！

dip—不依赖设备的长度单位

为了解决上面的问题，Android提出了dip（device independent pixel)的概念，IOS上也有类似的概念。

dip(device independent pixel), 也叫dp
意义：一个长度单位。1dp约等于1/160英寸。1dp代表的长度由屏幕厂商根据具体情况设定。

通常Android开发者设置元素大小时不使用px作为单位。而是使用dp(即dip)作为单位。那么在不同设备上，显示的大小都会差不多。

devicePixelRatio

devicePixelRatio = 1dp的宽度 / 1px的宽度。
意义：它的值带表1dp长度单位内有多少个物理像素。

对于iPhone来说，非视网膜设备的devicePixelRatio为1，视网膜设备为2。 对Android来说，它们的devicePixelRatio从0.75 - 2不等。见下表。

dip长度的设定（我自己的理解）

1dp代表的长度，是由屏幕厂商根据屏幕参数决定的。iphone5的一个物理像素的宽度约为pc上的1/3，因此一个大小为12px的字体在iphone5上看比PC上只有三分之一的大小，这样必须看不见！因此Android开发者都会使用dp作为单位，我们希望12dp的字体在手机上能看的清，如果12dp的长度有24个物理像素，那字体应该看起来约为pc上的2/3。恩，这样可以接受，很好，那就1dp长度内有2个px吧，于是devicePixelRatio等于2。

1dp的长度在各个设备下略有不同，但都约为1/160英寸，因此16dp的长度在各个屏幕下看大小略微不同，但也差不多。

移动端浏览器的秘密优化-单位转换

在进行Web开发时，我们通常还是使用百分比，或者px作为单位。但是移动端浏览器在渲染时，会根据devicePixelRatio转换长度。如iphone5的devicePixelRatio为2，网页中得一个字体为12px，那么在手机上渲染时，浏览器会重新计算这个字体的大小为2*12=24px。因此在字体看起来差不多大。

iphone5 vs iMac，实例分析

iphone5的dpi为326, iMac的dpi为102, 因此iphone5上16px的大小为iMac上的102/326 16 ~= 4.8，16px的字体如果不进行单位转换，在iphone5上看，好像iMac上的4.8px大。iphone5的devicePixelRatio为2，移动端浏览器渲染时，将16px的单位转为16dp，因此在iphone上看起来，好像是iMac上的4.8 2 ~= 10px。