Printed Output Dependent on Window Size

Question

As the title suggests, I'm working on a project and need to have print capability on a specific page. This page is 90% text. Changing the window size affects the size of the content printed on each page. This is odd because I'm already using an @print media query in my stylesheet.

In other words, when inspecting the print dialog while the window is at full width, the preview shows small print and all the content is stretched out across the page. When halving the screen size and again inspecting the print dialog, the content and text become bigger and better fit the page. This behavior persists even when I change the unit of measurement for font-size from px to pt.

Put simply, the size of the printed output is responsive to the size of the window. Is this normal / to be expected? Is there a way around this? I don't see this behavior on other sites. I would think that whether you attempt to print at full window size of half window size, the size of the printed content should be the same.

Answer 1

Either use a printing stylsheet as explained by mdn

<link href="/path/to/print.css" media="print" rel="stylesheet" />

or use a print media query css selector in your regular stylesheet.

@media print { 
 /* set a constant font size, width and height, hide toolbars etc */
}