在《图像和展示》一文中，我们提到了现在各种移动设备可能会拥有比PC更高的分辨率，例如iPhone 6S的分辨率为1920 x 1080，屏幕尺寸只有5.5英寸，而MacBook Pro Renta的分辨率为2560 x 1600，屏幕尺寸为13.3英寸。按照上一片文章的理解，当我们建设一个980px宽的网站时，在iPhone等这些高分辨率，小尺寸的设备上岂不是会显示得非常小？我们知道，实际的展示的样式并不是这样，但这其中是什么样的原理呢？本文试图一探究竟。

说到这个问题，不得不说说高清屏的发展，在智能手机刚刚被研发出来时候，是没有高清屏的，例如iPhone3的分辨率是320 x 480，而iPhone4的分辨率则为640 x 960。按照理解，一个320像素宽的网站，在iphone4上将缩小一半，这样很多网站将不兼容iPhone4。显然苹果是聪明的，为了保持和旧版iPhone的兼容性，当CSS指定宽度为320px时，网站依旧铺满全屏，用两个像素点渲染一个CSS像素。这里涉及到了两个概念，一个是CSS像素，一个是devicePixelRatio. …阅读更多>>