当打印时，浏览器不知道纸张有多宽 [英] When printing, the browsers don't know how wide the paper is

问题描述

我有一个打印html文件的问题。显然，浏览器不知道纸张有多宽，而且他们做出了野蛮和不准确的猜测！

文档是响应式的，显示不同宽度的不同布局，希望在打印时，他们会采取约700或800像素的风格，但他们不。

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

确保浏览器都设置为使用相同的纸张大小，方向和边距，并且没有任何缩放到适合页面标记设置。

这里是一个小提琴： http://jsfiddle.net/MrLister/Lc5kE/show

如果你调整窗口大小，你会看到它显示它有多宽。然后当你打印打印预览，这是当它出错了：IE说，A4的宽度是18..19厘米，Mozilla说20..21厘米和Chrome说14..15厘米。歌剧是最糟糕的：它不看纸，它只是在屏幕上的窗口的大小。

和像我说的，没有什么区别，无论你使用物理单位或像素或 em 。

那么我做错了什么？我可以俯瞰什么吗？

编辑：经过一些更多的测试后，我发现IE需要一些固定的纸张大小（如A4）打印机边距，而Mozilla不考虑。所以如果你将所有的边距设置为零，IE和Mozilla都报告20..21厘米的宽度。

解决方案

最简单的方法是使用'％'而不是'cm'。 / p>

对于JSFiddle示例，问题是你没有在'@media'中指定更改的divs宽度min-width / max-width查询。由于给定的div的宽度是固定的。页面本身不响应。您可以通过调整浏览器大小并查看溢出情况来更好地理解您的问题...因此，您的网页无法满足打印页。

此外，为了适应打印页面中的div，您可以使用以下css代码：

  @media print {
 html，
 body {
 width：100％; 
} 
 body div {
 max-width：100％; 
} 
} 
  

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

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

你的div是31厘米宽，边距通常是1厘米。因此，在16厘米至17厘米宽的打印页面中，您可以将其缩放到50％，然后手动将页面适合打印页面。

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

I've got a bit of a problem with printing a html document. Apparently the browsers don't know how wide the paper is, and they make wild and inaccurate guesses!

The document is responsive, showing different layouts at different widths, and I hoped that when printing, they would take the styles for about 700 or 800 pixels, but they don't. Not all of them.

Tried to change the media queries from sizes in px to physical units (pt or cm) but that did not help.

I also ensured that the browsers were all set to use the same paper size, orientation, and margins, and that they didn't have any "scale to fit page" flags set.

Here is a fiddle: http://jsfiddle.net/MrLister/Lc5kE/show
If you resize the window a bit, you will see that it shows how wide it is. Then when you hit Print Preview, that's when it goes wrong: IE says the width of an A4 is 18..19cm, Mozilla says 20..21cm and Chrome says 14..15cm. Opera is the worst of all: it doesn't look at the paper at all, it just takes the size of the window on the screen.
And like I said, there is no difference whether you use physical units or pixels or em.

So am I doing something wrong? Am I overlooking something? Is there something I can do, short of forcing a fixed paper size (like A4) down people's throats?

Edit: after some more testing, I found that IE takes the printer margins into account, while Mozilla does not. So if you set all the margins to zero, IE and Mozilla both report 20..21cm for the width. The others are still very uncooperative though.

解决方案

The easiest way will be to use '%' instead of 'cm'.

The problem, as far as the JSFiddle example goes, is that you have not specified the changed widths of the divs inside the '@media' min-width/max-width queries. Since the widths of the given divs are fixed. the page itself is not responsive. You can understand your problem better, by resizing your browser and seeing that the overflows are shown... Thus in short your page is not responsive to fit the print page.

Also, just to fit the divs within the print page, you could use the following css code:

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

(Note: this code wont work on your JSFiddle example, since the styles of 'div's were specified inline.)

Still not satisfied? Use css transform to scale the page to fit the print page. When using this, don't forget to set 'transform-origin: 0% 0%;'.

For example, the largest of your divs is 31cm wide, and the margins is usually 1cm. So, within a print-page of width between 16cm and 17cm, you could scale it to 50% and manually fit the page to the print-page.

The former method is the best practice though. Gud Luck.

这篇关于当打印时，浏览器不知道纸张有多宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！