打印时，浏览器不知道纸张的宽度答案

【问题标题】：When printing, the browsers don't know how wide the paper is打印时，浏览器不知道纸张的宽度
【发布时间】：2013-12-15 10:24:37
【问题描述】：

我在打印 html 文档时遇到了一点问题。显然浏览器不知道论文的宽度，它们会做出疯狂且不准确的猜测！

文档是响应式的，以不同的宽度显示不同的布局，我希望在打印时，他们会采用大约 700 或 800 像素的样式，但他们没有。不是全部。

尝试将媒体查询从 px 的大小更改为物理单位（pt 或 cm），但这没有帮助。

我还确保所有浏览器都设置为使用相同的纸张大小、方向和边距，并且它们没有设置任何“缩放以适应页面”标志。

这是一个小提琴：http://jsfiddle.net/MrLister/Lc5kE/show
如果稍微调整窗口大小，您会看到它显示了它的宽度。然后当你点击打印预览时，就会出错：IE 说 A4 的宽度是 18..19 厘米，Mozilla 说 20..21 厘米，Chrome 说 14..15 厘米。 Opera 是最糟糕的：它根本不看纸，它只占用屏幕上窗口的大小。
就像我说的，无论你使用物理单位还是像素还是em，都没有区别。

那么我做错了吗？我忽略了什么吗？除了将固定的纸张尺寸（如 A4）强行塞进人们的喉咙之外，我能做些什么吗？

编辑：经过更多测试，我发现 IE 考虑了打印机边距，而 Mozilla 没有。因此，如果将所有边距设置为零，IE 和 Mozilla 都会报告 20..21cm 的宽度。不过其他人还是很不合作。

【问题讨论】：

看看这里，可能有帮助：stackoverflow.com/questions/3341485/…他们说不可能！
CSS 分页媒体支持在浏览器中一直参差不齐。虽然很不幸，但我对这种事情的发生并不感到惊讶：/
@IliaRostovtsev 是的，这是关于强制页面为 A4 的。我可以做到这一点，但是我会在其他页面尺寸的打印机上产生问题。甚至是风景。
@BoltClock'saUnicorn 但你不会称它为错误？
我想知道自己是否有一个好的方法可以避免由此产生的所有问题/问题......而且，我们都有一个很好的打印工具，可以适应（文本）适用于所有纸张尺寸 - 我猜 -> pdf （是的，当用户需要打印大页时，图像很糟糕）。只是一个从无到有的想法。看看stackoverflow.com/questions/391005/...

标签： html css printing cross-browser media-queries

【解决方案1】：

最简单的方法是使用 '%' 而不是 'cm'。

就 JSFiddle 示例而言，问题在于您没有在“@media”最小宽度/最大宽度查询中指定更改后的 div 宽度。由于给定 div 的宽度是固定的。页面本身没有响应。您可以通过调整浏览器大小并查看溢出显示来更好地理解您的问题...因此简而言之您的页面没有响应以适应打印页面。

另外，为了让 div 适合打印页面，您可以使用以下 css 代码：

@media print{
 html,
 body{
  width: 100%;
 }
 body div{
  max-width: 100%;
 }
}

（注意：此代码不适用于您的 JSFiddle 示例，因为 'div' 的样式是内联指定的。）

还不满意？使用 css 变换 缩放页面以适合打印页面。使用时，不要忘记设置'transform-origin: 0% 0%;'。

例如，您最大的 div 宽度为 31 厘米，边距通常为 1 厘米。因此，在宽度介于 16 厘米和 17 厘米之间的打印页面内，您可以将其缩放到 50% 并手动使页面适合打印页面。

不过，前一种方法是最佳实践。好运。

【讨论】：

抱歉，您将如何在@media 查询中使用百分比？能给我举个例子吗？我的小提琴是一个例子，表明不同的浏览器处理印刷媒体的方式不同（即实际问题）；在原始页面上几乎没有那么清楚是什么导致了他们的问题。原始页面是响应式的。问题是不同的浏览器在打印到同一张纸时使用不同的媒体查询。对于这个问题，将 body 设置为 100% 不起作用。