网页宽200像素，截图却有400像素？分清CSS尺寸与截图输出比例

01先给“宽度”写上单位

DOM里的200、PNG文件里的400和文档中显示的宽度，描述的是三个不同对象。CSS像素用于网页排版；图片文件记录栅格宽高；插入文档后还可能按另一套显示尺寸缩放。三者没有必要相等。

MDN对devicePixelRatio的说明把它定义为设备像素与CSS像素的比例，并说明页面缩放可以改变该值，双指放大不改变它。因此，“页面显示100%”还不足以单独决定导出的像素数。截图程序也可以选择缩放或重新采样。

02一个200×100色块，把字体和边框也放进去

练习包中的tile.html是本站原创测试页面。页面只有浅蓝矩形、深色边框、A/B两个标签和两行文字，没有远程图片、登录或业务信息。使用border-box，让指定宽高包括2像素边框，免得把盒模型差异误判成截图缩放。

先在浏览器打开HTML，再检查元素的边界宽高。如果你自己的页面有CSS transform、百分比尺寸或动画，先停掉这些变量；不要用一次有多个变化的截图判断密度问题。

width:200px; height:100px; box-sizing:border-box; border:2px solid #0f172a; background:#dbeafe; font:16px/1.4 Arial,sans-serif;

03保持布局不变，只改一个截图设置

本次对照使用Edge的独立自动化浏览器环境：固定800×600视口，分别设置设备比例1和2；页面内容与元素尺寸相同。采集的是元素本身，不包含浏览器工具栏。比例2不是把第一张小图再次放大，而是重新渲染同一网页。

Playwright截图选项明确区分CSS和device输出比例。练习使用该选项建立可控对照；系统快捷键、扩展和网页截图服务可能有不同规则，必须另查它们的设置并读出结果文件尺寸。

04结果要比较宽高、比例和画面内容

三个PNG的实际编码尺寸应与下表一致。宽和高都乘2，像素总数乘4：200×100=20000，400×200=80000。它不代表文件字节一定四倍，PNG压缩还取决于内容。

逐个打开原始下载文件，确认A在左、B在右，边框完整，文字没有被裁掉。用图片查看器的100%像素显示可比较栅格；为了视觉对照，把400×200放在200×100的显示框里也合理，但那是显示缩小，不能改写文件原尺寸。

05交付需要什么，就保留什么尺度

用于网页或文档里的小幅界面示意时，可以保留较高像素的原始截图，再明确显示尺寸；对方要求精确200×100文件时，应导出或缩放一份该尺寸副本。把原始捕获与交付副本分开命名，避免之后只能从缩小版反复放大。

如果需要裁掉多余区域，按原图与预览坐标的裁剪说明核对选区；如果手里只有低像素旧截图，按像素放大与细节的区别判断，不能把重新采样当成补回不存在的字形。

症状是元素边框也变宽，先查截图比例；症状是少了半行字，先查裁切与滚动范围；症状是图像宽高正确但文字糊，查原始来源、缩放路径和最终显示。改DPI标签、反复保存或只改文件名，都不能替代这些检查。