这几个概念实在是太绕了，光想理顺它，就拖了好久才下笔整理下来

设备像素

  • 真实像素
  • 物理像素
  • 设备会有几个物理像素来表示一个css像素
  • canvas.width/height

设备独立像素(dip)

  • 与屏幕密度相关，与设备无关
  • 是计算机坐标系中的一点，是程序可用的虚拟像素
  • 逻辑像素
  • 比如CSS像素
  • canvas.style.width以及screen.width

设备像素比(devicePixelRatio)

  • 设备像素比 ＝ 物理像素 / 设备独立像素
  • 设备像素比 ＝ 设备像素 / CSS像素
  • 在非retina屏幕上，屏幕物理像素是320，独立像素也是320;在retina上，屏幕物理像素640，独立像素还是320，因此设备像素比为2
  • 可通过window.devicePixelRatio查看
  • 当它不等于1时，说明会用大于1个的物理像素以填充的方式来渲染1个逻辑像素，这样就出现了图片模糊的情况。
  • <meta name="viewport" content="width=device-width">的时候，其视区宽度并不是640像素，而是320像素，是独立像素值。

  • 并不是所有看上去清晰的手机屏幕都是2被devicePixelRatio的。有些不清晰的屏幕，还有可能是3倍的，比如酷派8675.
    0中的webkitBackingStorePixelRatio是2.

  • webkitBackingStorePixelRatio
    它只有在safari和chrome中才有的属性。它决定了浏览器在渲染一个图片的时候用几个像素来存储画布信息。比如，safari 6.0中，它的值为2，当要渲染100px*100px的图片时，它首先在内存中生成一个200*200的图片，当在retina屏下，devicePixelRatio=2时，屏幕本身会按照200*200来渲染图片，这时所需的大小正好与内存中一致，直接拿出来用就好，此时显示出来的图片就不会失真。否则若devicePixelRatio=1，那么图片就会被放大1倍来显示，就会变模糊了。

(小图变大会模糊，大图变小会更清晰)

参考