移动web开发(二): 尺寸和单位

做了几年的手机网站,其实对移动端web开发还是没有一个系统的了解。这一系列的文章将总结移动web的相关知识。

但凡看移动web关于尺寸的文章,都会提到很多概念,让人摸不着头脑。本文主要讲述个人对于尺寸和单位的理解。

涉及到的知识点有:
1. 尺寸:设备物理像素, 设备独立像素, css像素和 window.devicePixelRatio,ppi和dpi
1. 图片为什么做2倍大小?
2. pt 正解

尺寸

先看看 iphone6 的参数:
- 屏幕分辨率:750x1334 像素
- 主屏:4.7 英寸 (对角线长度,1 英寸 = 2.54cm)

首先,我们知道屏幕是由一个个发光体组成的,这些发光体可以显示所需的颜色。

设备物理像素,指的就是屏幕分辨率 750px x 1334px,其实相当于 750 x 1334 个发光体。iphone6的屏幕长宽是 375pt x 667pt 。pt是绝对长度,它是和cm,mm一样的长度单位,可以度量的。而px是相对单位,它是相对于pt来说的。比如上面 iphone6 就可以说是 2px 相当于 1pt。

注意:屏幕分辨率的px和css像素里的px不同。

css像素也是相对长度。当我们设置了viewport的width=device-width后,1个css 像素就是1pt,因为如果我们设置一个盒子宽度是375px时,刚好是铺满屏幕的。device-width 指的就是设备独立像素的宽度 375px,即css像素和设备刚好完美对应的宽度。当使用双指放大屏幕至2倍时,一屏幕实际只有 375/2 css像素,也就是说此时1个css像素就是2pt。

window.devicePixelRatio (DPR) 叫做设备像素比。它的计算公式是: 设备物理像素 / 设备独立像素。即 750 / 375 = 2.0 。

ppi 全称是 pixel per inch,表示每英寸多少个像素。计算公式是:

ppi计算公式

也就是 对角线像素数 / 对角线长度。

dpi 是印刷方面的,dots per inch 。表示每英寸可以打印多少个点

图片为什么做2倍大小

要知道像素图片显示清晰的条件是 1个发光体对应1个图片的css像素。当在iphone6下,如果是一倍图片,那么1px x 1px的像素点会分布到2 x 2个发光体去显示,这个过程就相当于把图片放大了两倍,所以图片会变得模糊。所以图片要做2倍大小。

当然,对与devicePixelRatio是3的设备,需要多3倍大小。不过2倍大小的图片在显示上也够清晰了,为了省事和移动流量方面的考虑,个人感觉2倍目前就够用了。

pt正解

在上面已经提过 pt 了,它是一个绝对单位,全称是 point。网上很多人说 1pt = 1/72英寸,其实这是打印方面的说法,表示1英寸(2.54 cm)上可以打印72个点。

在web方面,拿方便计算的 iPhone 3G 来说。

iPhone 3G 的屏幕像素密度

iPhone 3G 的屏幕像素密度是每英寸 163 个像素,而它的 devicePixelRatio 是1,也就是1pt = 1px,所以我们也可以说每英寸上有 163 个 pt,那么 1pt=1/163 英寸,这就是 iOS 开发中 pt 的长度!约等于 0.16 毫米。

发表评论

电子邮件地址不会被公开。 必填项已用*标注