移动Web的一些名词

移动

---

CSS pixels

浏览器使用的抽象单位， 主要用来在网页上绘制内容。

device pixels

显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。两者之间的换算公式：

$$CSS pixels=devicePixelRatio^2 \times device pixels$$

PPI

单位英寸像素数,Pixel Per Inch,现实世界的一英寸内像素数，决定了屏幕的显示质量，下面为计算公式（有误差）：

$$CSS pixels=\frac{\sqrt{deviceWidth^2 + deviceHeight^2}}{inch}$$

DPR

设备像素比率,Device Pixel Ratio,物理像素与逻辑像素（px）的对应关系

Resolution

分辨率，屏幕区域的宽高所占像素数

PPI,DPR和Resolution的关系

name	ldpi	mdpi	hdpi	xhdpi
PPI	120	160	240	320
Resolution	240*320	320*480	480*800	640*960
DPR	0.75	1.0	1.5	2.0

viewport

　viewport，翻译为中文可以叫做“视区”，大家都知道移动设备的屏幕一般都比PC小很多，webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3：1或2：1）进行缩放。也就是说当我们加载一个普通网页的时候，webkit会先以980像素的浏览器标准加载网页，然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。他有以下几个属性

• width 控制 viewport 的大小，一般为了自适应设置为device-width
• height 一般为了自适应设置为device-height
• target-densitydpi 设备的默认缩。打个比方说，一张320*480的图片，放在iphone4里面，默认是占满屏幕的，但如果定义了target-densitydpi=device-dpi，那么图片只占屏幕的四分之一（二分之一的平方），因为iphone4的默认缩放比例为2(查上表)。他可以设置的之如下：
  
  • low-dpi – 使用ldpi作为目标 dpi。中等像素密度和高像素密度设备相应放大
  • medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
  • device-dpi 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
  • high-dpi 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小
• initial-scale 初始缩放，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现
• maximum-scale 最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。
• user-scalable 用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。

常见viewport设置

    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

。