如何使用CSS在Chrome中准确模拟A4纸进行打印？

调整 CSS 以模拟 A4 纸并启用准确打印

要在 Web 中创建模拟 A4 纸并在 Chrome 中准确打印，需要使用某些 CSS调整是必要的。虽然提供的元素尺寸 21 厘米 x 29.7 厘米可能看起来正确，但在打印或生成打印预览时，页面会被剪裁。

解决问题

经进一步调查，根本原因在于打印介质规则中将“初始”分配给页面宽度。如果没有为其父元素定义特定的长度值，则在 Chrome 中使用“initial”作为宽度会导致缩放。这会导致页面太长且内边距大于预期的 2 厘米。

解决方案

要纠正此问题，请将“initial”替换为实际纸张打印介质规则中的宽度 (210mm) 和高度 (297mm)。将此应用于“html”、“body”或直接应用于“.page”元素。

html, body {
  width: 210mm;
  height: 297mm;
}

示例

以下修订后的 CSS 代码合并了建议解决方案：

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... other print styles ... */
}

兼容性

此解决方案成功解决了 Chrome 中的打印问题（在各种操作系统平台上进行了测试），同时保留了其他浏览器中的功能。

以上是如何使用CSS在Chrome中准确模拟A4纸进行打印？的详细内容。更多信息请关注PHP中文网其他相关文章！