本文详解如何通过 css 在浏览器打印场景下可靠实现物理尺寸（如 40mm × 50mm）的精确输出，涵盖媒体查询、单位选择、浏览器与打印机校准关键因素，并提供可直接复用的代码方案与实测建议。
本文详解如何通过 css 在浏览器打印场景下可靠实现物理尺寸（如 40mm × 50mm）的精确输出，涵盖媒体查询、单位选择、浏览器与打印机校准关键因素，并提供可直接复用的代码方案与实测建议。
在网页打印中，直接使用 img { width: 40mm; height: 50mm; } 往往无法获得真实物理尺寸的精准输出——实测常出现 41–42mm 的偏差。这并非 CSS 本身失效，而是由多重系统级因素共同导致：浏览器渲染引擎对 mm 单位的解析依赖于设备像素比（DPPX）、操作系统报告的屏幕/打印机 DPI、打印驱动缩放设置，以及默认启用的「适应页面」（Scale: “Shrink to fit” 或 “Automatic”）等。
✅ 核心解决方案：强制限定打印上下文 + 禁用自动缩放
必须将样式包裹在 @media print 媒体查询中，确保仅在打印预览/输出时生效；同时，需显式重置页面缩放行为：
@media print {
/* 关键：禁用浏览器默认的“自适应缩放”，强制 100% 比例 */
@page {
size: auto; /* 或指定 A4: 210mm 297mm */
margin: 0;
}
body {
margin: 0;
padding: 0;
/* 防止用户打印设置中的“背景图形”被禁用（影响边框/颜色参考） */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
img {
width: 40mm;
height: 50mm;
/* 强制不拉伸、不缩放，保持原始宽高比与尺寸 */
object-fit: none;
/* 可选：添加 1px 红色边框辅助实测校准 */
border: 1px solid #f00;
}
}⚠️ 关键注意事项（实测验证必备）：
- 打印设置必须手动设为“100% 缩放”：Chrome/Firefox 打印对话框中，务必取消勾选 “Fit to page” 或将 “Scale” 明确设为 100%；否则 CSS 尺寸将被二次缩放。
- 避免使用 px 或 em 等相对单位：mm、cm、in 是唯一被 CSS Paged Media 规范明确定义为绝对物理单位的，但其精度仍受底层 DPI 映射影响（标准假设为 96dpi → 1in = 25.4mm → 1mm ≈ 3.78px）。
- 打印机驱动差异显著：部分驱动（尤其 Windows GDI 打印机）会忽略 CSS @page 设置。建议优先测试 Chrome（Blink 引擎）+ PDF 虚拟打印机（如 Microsoft Print to PDF），因其对 CSS 打印支持最接近规范。
- 校准建议：首次部署时，生成含 10mm × 10mm 红框 + 刻度线的测试页，实测打印后用游标卡尺比对，若存在系统性偏差（如恒定 +1.2%），可在 CSS 中反向微调：width: calc(40mm * 0.988);。
? 总结：CSS 实现毫米级打印精度是可行的，但需“CSS 声明 + 浏览器设置 + 打印驱动”三者协同。@media print 是前提，100% 缩放 是底线，mm 单位是基础，而实测校准才是交付可靠的最终保障。
