康贱猫上个月接了一个标签打印需求，规格是60×40mm，每张标签上要打二维码、品名和条码。方案定的是纯前端，不装客户端，直接用浏览器打印能力输出。这种方案在Web前端领域不算稀奇，但奇怪的是，我在样式表里写了@page { size: 60mm 40mm; margin: 0; }，打印预览里显示出来的却是A4纸，标签内容被拉到页面左上角，比例完全不对。我当时的第一反应是CSS写错了，反复检查语法也没有任何问题，后来花了整整两天才把问题彻底解决。这篇博文就把整个踩坑过程和最终落地的自适应打印方案完整记录下来，给正在做Web前端标签打印的同学一个参考。
如果你想做的只是偶尔打一张A4报告，这篇文章可能用不上。但如果你也是做标签、吊牌、面单这类需要精确物理尺寸的打印，那@page size这个坎，大概率你也会遇到。
1. 标签打印为什么绕不开@page
1.1 标签打印和普通网页打印的本质差异
普通网页打印，比如打印一篇文档、一张订单详情，我们对物理尺寸没那么敏感。A4纸多宽少宽无所谓，内容按流式排版，超出部分翻页就行。但标签打印完全不是这样。
标签纸是固定规格的，60×40mm就是60×40mm，多1mm都会导致内容跑到相邻标签上。而且标签通常是不干胶纸，一张A4纸上排了很多枚小标签，打印时每一枚标签都必须刚好落在对应位置上。这要求浏览器必须知道“当前这一页到底有多大”。而CSS里能控制页面尺寸的标准方式，就是@page规则。
@page在CSS分页媒体（Paged Media）规范里定义了页面盒模型，包括页面大小、边距、页码等。简单理解，它就是告诉浏览器“我这一张纸是多大、内容区域离纸边多远”。如果这个信息丢失，浏览器就会按默认的A4或者Letter大小来排版。
1.2 @page规则的“兼容性真相”
关于@page size，我必须先说一个扎心的结论：它并没有在所有主流浏览器里被完整支持。
Chromium内核的Chrome和Edge，从85版本开始支持@page size，但限制也很多，它只能作用于页面根级别，不能按某个元素单独设置页面大小。Firefox目前主流版本对@page margin是支持的，但size属性支持得不好，你很难通过CSS直接指定一张60×40mm的自定义纸张。Safari则更保守，对@page size的支持一直比较弱，而且不同版本的差异很大。
我把实际测试的情况整理成了表格：
| 浏览器 | @page size | @page margin | 自定义纸张尺寸 | 实际打印表现 |
|---|---|---|---|---|
| Chrome 85+ | 支持 | 支持 | 支持 | 可生成对应尺寸页面 |
| Edge（Chromium） | 支持 | 支持 | 支持 | 与Chrome一致 |
| Firefox | 不支持或不稳定 | 支持 | 需要在打印弹窗手动选纸张 | 容易退化成A4 |
| Safari | 支持较差 | 部分支持 | 不支持 | 容易忽略size设置 |
这意味着，如果你们的系统是面向内部员工的，浏览器环境统一为Chrome或Electron，那直接用@page size没有问题。但如果是面向外部用户，用户可能用Firefox、Safari，甚至老旧浏览器，那必须额外准备一套自适应打印方案。
当时我的第一版代码长这样：
css复制@page {
size: 60mm 40mm;
margin: 0;
}
在Chrome里预览，纸张大小确实变成了60×40mm，但用户反馈在Firefox里打印出来还是A4。后来我特意用Firefox打开同一个页面，发现预览确实没有识别这个尺寸。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 排查实录：@page size不生效的四种典型原因
如果你在Chrome里也遇到了@page size不生效的情况，那问题大概率不在CSS本身，而是下面这四个地方中的一个。
2.1 第一个坑：容器尺寸干扰了分页感知
很多人写页面时，页面里的主体容器是定宽的，比如max-width: 1200px或者width: 100%。这样的布局在屏幕上看着没问题，但打印时浏览器会把整个页面当成一个分页上下文。
当页面宽度超过纸张时，浏览器为了把内容塞进纸张，会做等比缩放。这一缩放，就会让标签内容变得很小。反过来，如果页面宽度小于纸张，内容又会偏在左上角。
我的第一个坑就在这里。当时页面里有一个宽为960px的表格容器，打印时Chrome自动把整个960px宽度缩放到了60mm宽度内，标签内容自然就缩成一小块了。
解决办法是，在打印媒体下重置页面主容器的宽高：
css复制@media print {
html,
body {
width: auto;
height: auto;
margin: 0;
padding: 0;
}
.page-container {
width: auto;
max-width: none;
margin: 0;
}
}
这一步做完后，Chrome打印预览里纸张上的内容占比明显正常了。但是，纸张仍然可能不是60×40mm。
2.2 第二个坑：浏览器默认边距和缩放设置
浏览器打印弹窗里有几个设置：边距（Margins）、缩放（Scale）、纸张（Paper size）。很多用户从来没动过这些选项，默认值可能是“默认边距