2

I have a responsive site in which I am trying to implement the print media query.

When I preview using the Chrome Devtools (Rendering tab > Emulate CSS media > Print), it looked pretty similar to the actual website at that breakpoint but with the print css applied. However, on the print preview (CTRL + P), it is completely different.

The Devtools preview changes as I resize the browser, so I can't really say for sure which breakpoint is being used on the actual print preview mode.

  1. The question is, when printing, what width does the Browser uses to generate the snapshot?
  2. Is this width consistent throughout all the browsers?
  3. If there isn't a fixed width, how shall I go about it?
Suthan Bala
  • 3,209
  • 5
  • 34
  • 59
  • [When printing, the browsers don't know how wide the paper is](https://stackoverflow.com/q/20282092/1016716)... – Mr Lister Jul 19 '18 at 17:04

1 Answers1

1

Different browsers interpret breakpoints differently when styling for print. I just opened this page at 1000px wide in Firefox and Chrome, and when printing, Firefox maintains the left-hand sidebar and Chrome drops it. And as you noticed, the print emulation is not guaranteed to look like the print preview. I have usually found it easier to make the emulation look right than to get the actual printing to look right.

My takeaways from working on a few print stylesheets recently were:

  • if you want a style to apply in print, and it's inside a breakpoint media query, also put it inside your print media query.
  • always check the print preview, and check on multiple browsers.

There will probably still be styling to fix after getting the breakpoint styles into the print query, but it's a big step forward.

Reve
  • 111
  • 3