传智黑马39期WEB前端教程-第12阶段移动web开发基本功-第1节移动web基础知识-第3部分设备独立像素

第12阶段 移动web开发基本功

第1节 移动web基础知识

第3部分 设备独立像素

随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态（如iPhone3G/S为163PPI，iPhone4/S为326PPI），像素不再是统一的度量单位，这会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。

如下图，假设你设计了一个163*163的蓝色方块，在PPI为163的屏幕上，那这个方块看起来正好就是1*1寸大小，在PPI为326的屏幕上，这个方块看起来就只有0.5*0.5寸大小了。

做为用户是不会关心这些细节的，他们只是希望在不同PPI的设备上看到的图像内容差不多大小，所以这时我们需要一个新的单位，这个新的单位能够保证图像内容在不同的PPI设备看上去大小应该差不多，这就是独立像素，在IOS设备上叫PT(Point)，Android设备上叫DIP(Device independent Pixel)或DP。

举例说明就是iPhone 3G（PPI为163）1dp = 1px，iPhone 4（PPI为326）1dp = 2px。 

我们也不难发现，如果想要iPhone 3G/S和iPhone 4/S图像内容显示一致，可以把iPhone 4/S的尺寸放大一倍（它们是一个2倍(@2x)的关系），即在iPhone3G/S的上尺寸为44*44px，在iPhone4/S上为88*88px，我们要想实现这样的结果可以设置44*44dp，这时在iPhone3G/S上代表44*44px，在iPhone4/S上代表88*88px，最终用可以看到的图像差不多大小。

通过上面例子我们不难发现dp同px是有一个对应（比例）关系的，这个对应（比例）关系是操作系统确定并处理，目的是确保不同PPI屏幕所能显示的图像大小是一致的，通过window.devicePixelRatio可以获得该比例值。

见代码示例1-1.html

下图展示了iPhone不同型号间dp和px的比例关系 

从上图我们得知dp（或pt）和px并不总是绝对的倍数关系（并不总能保证能够整除），而是window.devicePixelRatio ~= 物理像素/独立像素，然而这其中的细节我们不必关心，因为操作系统会自动帮我们处理好（保证1dp在不同的设备上看上去大小差不多）。