关于使用@media print 时的 Firefox 与 Chrome 打印到 pdf 工具答案

【问题标题】：About Firefox vs. Chrome print to pdf tool when using @media print关于使用@media print 时的 Firefox 与 Chrome 打印到 pdf 工具
【发布时间】：2021-10-14 19:04:13
【问题描述】：

@media at-rule 可以指定一个媒体查询，例如print，以将 css 规则应用于文档。

假设我有以下代码：

@media print {
  @page {
    size: 3in;
    margin: 0.2in;
  }
}

body {
  border: 1px solid;
}

<body>
  <h1>Title for the page</h1>
  <p>Some text goes into here.</p>
</body>

当我在Chrome中打开这个html网页时，使用它的“打印到pdf”工具，我得到了一个令人满意的结果——用户不能改变导出的pdf大小，它是由css规则决定的，3英寸×在这种情况下为 3 英寸。但是，您可以在此 GUI 中更改边距，尽管我在第二条规则中明确设置了它。

编辑： 在打印工具中选择“默认”边距时，边距确实遵循css文件中设置的规则。

另一方面，在 Firefox 上，用户可以简单地更改 pdf 页面大小、更改方向以及如何将内容缩放到页面中。如果有，那么css规则有什么作用呢？

所以我的问题主要是针对 Firefox 的行为：这是一个错误还是可以？

任何想法都会非常有帮助。

【问题讨论】：

我认为这只是浏览器的工作方式，但我可能错了

标签： html css media-queries

【解决方案1】：

根据 MDN，截至 2021-10，基于 Gecko 和 WebKit 的浏览器（Firefox 和 Safari）根本不支持 @page/size CSS 规则。

https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size#browser_compatibility

Bugzilla 条目：[css3-page] implement @page rule size attribute

【讨论】：

解决了困惑。