物理像素/分辨率/逻辑像素/设备像素比/多倍图/1px/viewport

本文链接：https://blog.youkuaiyun.com/qq_41194539/article/details/130985943

文章详细介绍了屏幕像素、物理像素、分辨率、像素密度(PPI)、设备独立像素(逻辑像素)、设备像素比(DPR)、打印分辨率、多倍图以及1px问题，并提到了viewport在移动设备适配中的作用。同时，讨论了CSS像素与物理像素的关系，以及如何处理1px边框问题和移动端的适配策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

屏幕是一个面，是由很多发光的器材的小点组成的，是在设备出厂时就确定的，是真实存在的，而这一个点就是一个像素/物理像素。一个点对应的真实尺寸也是不相同的，这取决于分辨率和屏幕尺寸。通常人们说设备多少像素多少分辨率，例如800*1200，意思是：横向有800个小点，纵向有1200个小点组成。

像素密度指每英寸长度上的物理像素点个数。

在前端开发中，css像素就是一种逻辑像素，程序员在开发中使用的尺寸单位。

打印机分辨率又称为输出分辨率，是指在打印输出时横向和纵向两个方向上每英寸最多能够打印的点数，通常用DPI（点每英寸）来表示，例如某品牌打印机的分辨率为 600×600dpi。

设备的物理像素与逻辑像素的比，通过window.devicePixelRatio获取，在没有出现Retina 视网膜屏之前，设备像素比一直是1，但是出现之后，一个逻辑像素用两个/三个物理像素点表示，显示也更加高清了。
DPR=2，用2倍图
DPR=3，用3倍图

注意（CSS的1px等于几个物理像素，除了和屏幕像素密度dpr有关，还和用户缩放有关系。例如，当用户把页面放大一倍，那么CSS中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，CSS中1px所代表的物理像素也会减少一倍。）

多倍图的出现也是因为dpr的原因，dpr为2时，200px200px尺寸的图片，其实是400400物理像素尺寸，也就是说一个位图像素点对应四个物理像素点，而只有一个物理像素对应一个位图像素点时才能够足够清晰，所以dpr为2比dpr为1的需要大一倍的图片，位图像素指图片的最小单位。

iphone6的屏幕宽度为375px，设计师做的视觉稿一般是750px，在开发中设计图标识的1px其实是一个物理像素的尺寸，所以应该是border:0.5rem；但由于一些浏览器会直接把0.5px解析成0px，所以会出错。

window. innerWidth/Height

document. documentElement. clientWidth/Height

<meta name="viewport" 
	content="width=device-width, 
	user-scalable=no,
	initial-scale=1.0,
	maximum-scale=1.0, 
	minimum-scale=1.0"/>

适配解决方案见移动端适配大总结，包含页面适配、1px问题和多倍图问题