javascript - 不支持它的浏览器的@page size 的替代方案？

Question

主要在 Chrome 中开发，并且像下面这样的东西按预期工作:

@media print {
  @page {
    size: letter portait;
    margin: 0in; 
  }
}

虽然 CanIUse.com 说 Firefox 不兼容，但它暂时对我来说似乎工作正常:

https://caniuse.com/#search=%40page

但是，Edge、IE 和 Safari 并没有像 CanIUse 所说的那样工作。

实现相同目标的替代方法是什么？可能执行以下操作:

@media print {
  body {
    width: 8.5in;
    height: 11in;
    margin: 0in; 
  }
}

Answer 1

您的提议基本上可行。实际上，我建议只编写您的样式而不使用 @page，因为对它的支持仍然非常有限。编写一个在所有浏览器中工作相同的 @media print 查询比尝试使用 @page 一个版本然后回退要容易得多。

如果您想预览打印媒体的样式而不必不断单击打印按钮，只需 use your browser's developer tools to test the media you are testing .一开始需要反复试验。

此外，对于 0 值属性，您不需要包含单位。 margin: 0 就足够了。