如何避免为mm尺寸的Div及分页设置打印缩放？

核心原因 #

浏览器默认打印页面尺寸（如A4）与徽章的85mm×54mm不匹配，加上默认边距、盒模型溢出，导致分页计算出现微小偏差，必须靠缩放修正。

具体解决方案 #

• 强制打印页面尺寸与徽章完全匹配
  用CSS @page 规则直接指定打印页面的尺寸和边距，消除默认页面的干扰：

  @page {
    margin: 0; /* 去掉默认打印边距 */
    size: 85mm 54mm; /* 与徽章宽高完全一致 */
  }
  

• 严格控制徽章的盒模型尺寸
  确保徽章div的实际渲染尺寸严格等于设置的mm值，避免内边距、边框撑大元素：

  .badge {
    width: 85mm;
    height: 54mm;
    break-after: page;
    box-sizing: border-box; /* 强制边框/内边距包含在宽高内 */
    margin: 0;
    padding: 0;
    overflow: hidden; /* 防止内容溢出撑高元素 */
  }
  

• 禁用浏览器自动缩放适配
  在HTML头部添加meta标签，同时在打印媒体查询中强制不缩放：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  

  @media print {
    * {
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }
    .badge {
      zoom: 1; /* 强制保持1:1缩放比例 */
    }
  }
  

• 匹配打印机纸张设置
  打印前确认打印机的自定义纸张尺寸已设置为85mm×54mm，部分打印机默认会将非标准尺寸自动缩放适配到A4，这一步很关键。

内容的提问来源于stack exchange，提问作者Alexufo