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'min-width / max-width查询中指定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％并手动使页面适合打印页面。

前一种方法是最好的做法。 Gud Luck。

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

1 个答案: