MacBook Pro 视网膜屏（Retina）显示器硬件像素是 2880px * 1800px。当设置屏幕分辨率为 1920px * 1200px 的时候，理想视口的宽度值是 1920px， 那么 dip 的宽度值就是 1920px。其与理想视口宽度的比值为1.5（2880/1920），这个比值叫做设备像素比：
逻辑像素宽度 * 设备像素比 = 物理像素宽度设备像素比可以通过 window.devicePixelRatio 来获取，或者使用 CSS 中的 device-pixel-ratio。
下面是常见的设备像素比：
普通密度桌面显示屏：devicePixelRatio = 1
高密度桌面显示屏(Mac Retina)：devicePixelRatio = 2
主流手机显示屏：devicePixelRatio = 2 or 3
对于一张 100px * 100px 的图片，通过 CSS 设置其宽高：
{ width:100px; height:100px; }在普通显示屏的电脑中打开是正常的，但假设在手机或 Retina 屏中打开，按照逻辑分辨率来渲染，他们的 devicePixelRatio = 2，那么就相当于拿 4 个物理像素来描绘 1 个电子像素。这等于拿一个2倍的放大镜去看图片，图片就会变得模糊。
这时，就需要使用 @2x 甚至 @3x 图来避免图片的失真。
最后，本文仅涉及了移动端开发中视口的基本概念，具体细节可以参考 PPK 的大作《移动Web手册》
PS：电子版可关注公众号《代码写完了》，发送"ppk"获取