什么是物理像素和CSS像素？
- viewport的问题
- devicePixelRatio的问题
- PPI（pixels per inch）是指每英寸的像素数目，常用于度量计算机显示设备像素密度。
- DPI（dots per inch）是指每英寸数码印刷的点数，用于度量印刷行业的空间点的密度。
CSS 像素是编程中的概念，用于逻辑上衡量像素的单位。
- 物理分辨率是显示器的固有参数，不能调节，一般是指屏幕的最高可显示的像素数。
- 显示器分辨率就是操作系统设定的分辨率。在显示器分辨率和物理分辨率一致时，显示效果才是最佳的，一般推荐设置的分辨率就是物理分辨率。系统设置分辨率生效是通过算法进行了转换。
- 设备独立像素也叫逻辑像素，是一种基于计算机坐标系统的物理测量单位，应用程序将独立像素告诉系统，系统再将设备独立像素转换为物理像素。 我们在样式表中使用的px（独立像素）单位其实并不一定代表着实际的一个像素（物理像素）。 如果切了一张10像素宽高的图放在devicePixelRatio为2的屏幕中，设置宽高为10px，实际上就是在20像素宽高的区域中放了一张10像素的图片， 而图片被拉长为20像素，这样就糊了。如果要完美显示得放一张20像素宽高的图。
所以一般来说，图不一定偏大，但是一定是偏模糊的，因为四个手机像素的面积往往比一个电脑像素的面积大。 如果小，那么实际上不算糊。如果是特大屏，那当然也是糊的，但跟人的距离也有一定关系，所以特大屏也不算糊。 canvas放大的话，会有智能算法调整每个像素的颜色，所以会糊，因此必须让canvas的dpr为1才行。 而在ps上，就没有这个问题，它保留了像素，在完全两倍的情况下，像素点放大成了4个，简单放大，没有智能算法处理。
而在电脑屏幕或者canvas上，放大两倍并不是简单放大，而是通过线性插值去填充多余的像素。
如果用邻近像素采样，这样图像看起来就好像是由非常大的像素简单组成的。或者叫整数缩放，那么还是一样清晰的，但必须是整数倍。 放大的位图就变成了马赛克。 非整数倍的用双线性插值，那么这就是模糊的源头。目前canvas还不怎么支持更改插值函数，默认双线性插值。 放大的位图就变模糊了。
还有一种办法是超采样，对于不足2倍的，先按照2倍放大，然后再采样缩小到指定比例，这样做比双线性插值要清晰一些。 而位图部分会变得模糊。
缩放的目的就是让软件在不同像素大小下，看起来大小都差不多一样。因为人眼距离这些屏幕的距离差不多一样。 如果离人眼近的，比如说手机，那么展示的东西小一点，其实没什么关系，小一点反而更好。
高分屏，如果dpr为1，那么同样清晰的，但像素小很多，展示的东西也会小很多。
一句话就是，如果是整数倍分辨率+邻近像素采样会清晰，其他分辨率都会采用双线性采样导致变模糊。
为什么要用双线性采样，因为它生成的图片比邻近采样质量高，邻近采样会更清晰一点，但全是颗粒感和锯齿，不代表质量高。一般用于ps这种修图软件用。
window.devicePixelRatio（dpr） ，它是设备上物理像素和设备独立像素（device-independent pixel，dips，dp）比值。 可以通过重写 window.devicePixelRatio来更改此属性，如,：window.devicePixelRatio = 2。 所谓的一倍屏、二倍屏（Retina）、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说， 多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素， 而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。 现在主流的智能手机devicePixelRatio大部分为2，一部分为1.5，3的比较少，1的则更少（PC为1）。
如果一个 canvas 在视网膜屏幕上可能显得太模糊。使用 window.devicePixelRatio 添加额外的像素密度可以更清晰的显示图像。
- 双线性插值：大家实际只需要知道是通过周围四个点来算出一个点即可。
- 双三次插值：利用周围16个像素点计算出一个像素点的值。其实依旧是对两个轴的操作。其本质上和双线性插值没有区别，只是插值公式更加复杂而已。
在用户不参与的情况下，我们不能靠程序在网页上获取到准确的浏览器物理长度 1 厘米。