如何在CSS中正确设置Chrome打印的A4纸张尺寸？

CSS 设置 A4 纸张尺寸

问题：

用户在从网络打印 A4 纸张模拟时遇到困难Chrome 中的页面，内容被剪裁。即使单元尺寸设置为 21cm x 29.7cm，问题仍然存在。

调查：

经过进一步分析，根本原因是分配了初始值打印介质规则中的页面宽度。

宽度的影响：初始：

• 在 Chrome 中，如果父元素上没有为宽度提供特定长度，则打印媒体规则下的 .page 元素内的 width: 初始会导致页面内容缩放。

• 这会导致：

  • 内容对于页面来说太长大约2cm
  • 页面填充超过初始 2cm
  • 在缩放至 210mm 之前以大约 196mm 渲染内容

解决方案：

要解决此问题，在打印介质规则中明确将 A4 纸张宽度和高度设置为 html、body 或 .page，避免使用初始关键字。

修订代码：

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

注意：此修改保留了原始 CSS 设置，同时解决了 Chrome 中的缩放问题。

以上是如何在CSS中正确设置Chrome打印的A4纸张尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！