Why are print width media queries incorrect?

6
votes

I'm trying to use @media print along with min-width and max-width to target the currently selected paper size, to optimize for printing on both normal size paper (e.g. letter sized) versus photo sized paper (usually 4x6). But the media queries don't seem to evaluated correctly.

Here's an example of my HTML:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="photo.css">
  </head>
  <body>
    <div class="post">
      <div class="info">CSS: </div>
    </div>
  </body>
</html>

Here's a snippet of my CSS file:

@media print {
  @page {
    margin: 0.5in;
  }
}
@media print and (max-width: 12.0in) and (min-width:11.0in) {
  .info:after {
    content: "Matched 11 to 12"
  }
}
@media print and (max-width: 11.0in) and (min-width:10.0in) {
  .info:after {
    content: "Matched 10 to 11"
  }
}
@media print and (max-width: 10.0in) and (min-width:9.1in) {
  .info:after {
    content: "Matched 9 to 10"
  }
}

I have those for every width down to 1 to 2 inches wide.

When 8.5x11 paper, portrait is selected, I see "CSS: Matched 5 to 6". I would expect to see "CSS: Matched 7 to 8", because of the 0.5in margin.

When 8.5x11 paper, landscape is selected, I see "CSS: Matched 7 to 8". I expect to see "CSS: Matched 9 to 10" (again, because of 0.5in left and right margins).

When 4x6 paper, portrait is selected, I see "CSS: Matched 2 to 3". Which is correct, because 4 - (2 * 0.5) = 3. But when landscape is selected, I see "CSS: Matched 3 to 4", when I would expect to see "CSS: Matched 4 to 5".

I'm doing all this in Chrome, File->Print.

What am I getting wrong?

1
cssprintingprinting-web-page
Just to be clear, the problem is that the media query always seems to be for a far smaller page than the actual page. – William Hertling
have you tried removing the margins? – dippas
Have you tried using a CSS re setter? – GibboK
Try to using size property like this... @page { size: letter landscape; margin: 4.0cm; } – GibboK
I don't want to set the paper size in my CSS. I want to adapt dynamically based on what the printer page is set to. – William Hertling

1 Answers

0
votes

Typically this will be due to borders, margins or padding.

Remove margins and use:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

or add width/height for margins / padding / borders is another solution.