html - 打印时，浏览器不知道纸张的宽度

Question

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

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

试图根据 px 中的大小更改媒体查询到物理单位(pt 或 cm)，但这没有帮助。

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

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

那我是不是做错了什么？我忽略了什么吗？除了强制人们接受固定尺寸的纸张(如 A4)之外，我还能做些什么吗？

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

Answer 1

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

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

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

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

(注意:此代码不适用于您的 JSFiddle 示例，因为“div”的样式是内联指定的。)

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

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

虽然前一种方法是最佳实践。祝你好运。