浏览器模拟打印模式的方法

开发打印效果时，每次点“打印”看效果太低效。利用 Chrome / Edge 开发者工具可以模拟 A4 纸打印效果。

#type / howto #status / evergreen #platform / browser

[!info] related notes

所属 MOC: 浏览器开发者工具 MOC

相关面板: Rendering 面板, Device Mode, Elements 面板

浏览器模拟打印模式的方法

创建 A4 尺寸的模拟设备

A4 纸的 CSS 像素换算约为 794px × 1123px（基于 96 PPI）。

按 F12 打开控制台，按 Ctrl + Shift + M 开启设备模拟 (Device Mode)。
点击顶部设备下拉菜单 -> Edit -> Add custom device。
创建设备：命名为 A4 Portrait，宽高设为 794 x 1123。

开启 Print 媒体类型模拟

按 Ctrl + Shift + P 打开命令面板，搜索并打开 Rendering（渲染）面板。
找到 Emulate CSS media type，将其更改为 print。

👉 此时，你的浏览器视口将变成标准 A4 尺寸，并应用了所有打印样式！你可以在此基础上使用“元素审查 (Elements)” 轻松调参。

DevTools 的局限性

无法模拟分页断点： DevTools 里的“A4 设备”只是一个长宽固定的视口，如果内容超出 1123px 高度，它只会继续往下滚动，不会模拟真实的物理截断和换页。
终极检验： 样式在 DevTools 里调好后，一定要按 Ctrl + P 打开真实的打印预览窗口，这是唯一能准确检查 break-inside: avoid 等分页规则是否正确生效的方法。