如何使网页的打印视图缩放以始终适合单个物理页面？答案

【问题标题】：How do I make the printed view of a web page scale to always fit on a single physical page?如何使网页的打印视图缩放以始终适合单个物理页面？
【发布时间】：2020-05-05 12:08:26
【问题描述】：

我有一个网页，无论内容有多少，我都想占用一个打印页面。具体来说，我希望根据需要放大或缩小各种测量值，尤其是字体大小，以填充打印页面。

我已经在使用@media print 查询来设置打印所需的样式。我以为我已经满足了一切。这是旧的“它在我的机器上看起来正确”的案例。从我的笔记本电脑上的 Linux 上的 Firefox 打印到我的特定打印机看起来很完美。但是前几天，一位朋友从她的计算机/操作系统/浏览器/打印机组合打印了同一页，并且文本偏小，难以阅读。此外，页面底部大约有 1/4 到 1/5 的空白。

在其他页面（不用于打印）上，我使用了 vw 和 vmin 之类的东西来尝试让元素尽可能大，同时完全适合屏幕。但总有一些窗口几何形状会导致页面与我的意图发生冲突。

有没有办法在 CSS 中可靠地编码我希望内容缩放到一页大小的意图？

【问题讨论】：

标签： html css printing fonts font-size

【解决方案1】：

简短的回答是你不能“总是”让它工作。长的答案是，一旦你添加了除纯文本和纯字体之外的任何接近格式的东西，你就会遇到麻烦，需要成为 CSS 霸主。你这句话非常准确地描述了现实：

总有一些窗口几何图形会导致页面发生冲突我的意图。

如果你真的需要你的网页很好地适应一个页面，唯一 100% 成功率的选择是创建一个打印文件：手动将你的网页转换成 Microsoft Word 中漂亮的文档、Pages for mac os 或 InDesign，然后将其导出为您在网页上提供的 PDF。

【讨论】：

我害怕那个。谢谢你。虽然，根据这个 (stackoverflow.com/questions/10391645/…)，即使使用 PDF 也不是万无一失的。我想这只是我们生活的计算噩梦般的地狱景观。
那篇文章中 2014 年的评论还提到，它在打印页面上只有 5 毫米的差异 :) PDF 现在非常稳定，但如果你想要更高的像素稳定性，请使用 PNG，虽然你会输能够复制粘贴 PDF 中的文本。