打印时,浏览器不知道纸张的宽度

Question

打印html文档时遇到了一些问题.显然,浏览器不知道纸张有多宽,而且它们会做出疯狂而不准确的猜测!

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

试图将媒体查询从大小更改px为物理单位(pt或cm),但这没有帮助.

我还确保浏览器都设置为使用相同的纸张大小,方向和边距,并且它们没有设置任何"缩放以适合页面"标记.

这是一个小提琴: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-origin: 0% 0%; '。

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

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