DPI, PPI, pixel, dot, px概念辨析
Dot 和 Pixel
Dot 是屏幕上的一个点,物理的最小单位。在屏幕上,一个点可以显示各种颜色。Pixel是一个数字概念,存在于数字图像中,pixel是数字图像的最小单位。一个pixel可以用多个字节来存储rgba等多种信息。这个回答说的很好。
graphicdesign.stackexchange.com/questions/6080/what-is-the-difference-between-dpi-dots-per-inch-and-ppi-pixels-per-inch
DPI,PPI以及DPR
DPI是说在物理屏幕的点密度,一英寸有多少个点。PPI是软件概念,一英寸有多少个像素点。当DPI和PPI不同时,DPI/PPI = DPR。Windows早期默认PPI是96,但Windows支持用户设,现在高清设备上的Windows PPI 可以很高。Mac是74。唯一很让人困惑的是web,web中PPI是固定的96,所以在有些设备上DPR不等于1,在高清屏幕上,DPR等于2。所以Web开发中,px不是真的屏幕点,是严格意义上的像素,或者说广义上的虚拟像素,非常类似于android中的dp,只是android中默认的PPI是160,而Web中是96。所以Web的px * DPR才等于真的像素点。这么做的目的跟android一样,都是为了在不同设备上显示相同尺寸的控件。比如96px在96DPI的设备上是一英寸,在320px也是一英寸。他们像素点不同,但是显示效果一致。参考:https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel
在前端代码中用screen.width打出来的是px,不是pixel。