When printing, browsers don’t know how wide the paper is.

Question

I have a problem printing an html document. Apparently, browsers do not know how wide the paper is, and they make wild and inaccurate guesses!

The document reacts, shows different layouts of different widths, and I was hoping that when printing they would use styles of about 700 or 800 pixels in size, but they didn’t. Not all of them.

I tried changing media queries from px sizes to physical units ( pt or cm ), but that didn't help.

I also ensured that browsers were configured to use the same paper size, orientation, and margins and that they did not have the “scale to fit page” checkboxes selected.

Here is the fiddle: http://jsfiddle.net/MrLister/Lc5kE/show
If you resize the window a little, you will see that it shows how wide it is. Then, when you click Preview, it will happen when it goes wrong: IE says the A4 is 18.19 cm wide, Mozilla says 20..21cm, and Chrome says 14..15cm. Opera is the worst of all: it does not look at paper at all, it just takes the size of the window on the screen.
And, as I said, it makes no difference whether you use physical units or pixels or em .

So am I doing something wrong? Am I missing something? Is there something I can do by getting people with a fixed paper size (like A4) to go down on people?

Edit: after some testing, I found that IE takes printer fields into account, while Mozilla does not. Therefore, if you set all fields to zero, IE and Mozilla report a width of 20.21 cm. However, they are still very incompatible.

Answer 1

The easiest way is to use "%" instead of "cm".

The problem with the JSFiddle example is that you did not specify the changed div width in the min-width / max-width '@media' queries. Since the widths of the data divs are fixed. the page itself does not respond. You can better understand your problem by resizing your browser and seeing that the overflows are displayed ... Thus, in short, your page does not respond to the correspondence of the print page .

In addition, to fit the div on the print page, you can use the following css code:

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

(Note: this code will not work on your JSFiddle example, since the 'div styles were specified on the line.)

Still not satisfied? Use css transform to scale the page to fit the print page. When using this, be sure to set " transform-origin: 0% 0%; ".

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

However, the former method is best practice. Good luck.