Bootstrap 3 Pages Printing Mobile Version

Question

When we print pages from our web site, which is based on Bootstrap 3, they are printing on some browsers showing the mobile version. I have Googled to try and find a good solution, but not really found anything that works.

Using the same CSS for the screen and adding the "print-hidden" class to specific DIV's our pages look fine using Safari on a Mac, but using Chrome on the Mac or Firexof and Chrome on the PC the print preview shows the mobile version.

Is there an easy way to tell the browser that the viewport width is a regular screen not a phone (XS), or do we have to incorporate a lot of complicated grid changes etc?

Answer 1

Adding a print media query worked for me. This is what I finally stumbled onto.

@media print {
  @page {
    size: 330mm 427mm;
    margin: 14mm;
  }
  .container {
    width: 1170px;
  }
}

The 330mm and 427mm dimensions were just what seem to fit for my 1170px breakpoint. (They're also the 8.5/11 ration.)

EDIT: As @tony-payne said, this likely only works for Chrome. In my use case, that was fine. Just added a script with a warning about printing if not in Chrome.

<script>
(function() {
  var isChromium = !!window.chrome;
  var beforePrint = function() {
    alert("Printing is optimized for the Chrome browser.");
  };
  if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
      if (mql.matches && !isChromium) {
        beforePrint();
      }
    });
  }
  window.onbeforeprint = beforePrint;
}());
</script>

Answer 2

Something that worked for me...

in bootstrap grid.scss find:

    @include make-grid(xs);

then add below:

    @media print {
        @include make-grid(sm);
    }

Answer 3

This is a known issue that's mentioned in the official docs:

Printer viewports

Even in some modern browsers, printing can be quirky. In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See #12078 for some details. Suggested workarounds:

• Embrace the extra-small grid and make sure your page looks acceptable under it.
• Customize the values of the @screen-* Less variables so that your printer paper is considered larger than extra-small.
• Add custom media queries to change the grid size breakpoints for print media only.