网页显示大小的变化，从PC到Mobile-第一部分
最后更新于：2022-04-01 05:23:49
# 网页显示大小的变化，从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。