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?

Bondage

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>

Acaudal

This works for Chrome, but doesn't seem to make any difference to Firefox unfortunately. – Bondage

Only works well for small pages as this scales the page content to the paper. Also disables print orientation – Yasui

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);
    }

Plica

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.

Acatalectic

Thanks cvrebert. We had seen the official docs on this problem as well as the posts on "#12078", but other than stating "Customize the values of the @screen-* Less variables" I am not sure what we need to change these to, so that printing assumes the viewport is at least 768px wide. It's definitely a major problem for a lot of developers. – Bondage

For workaround 2, rather than trying to mess with what viewport size is used when printing, you instead change the grid so that whatever viewport size printing uses is considered at least Small rather than Extra-Small. Decrease @screen-sm-min until printing stops producing the Extra-Small layout. – Acatalectic

How do I fix this in BS4? Could someone provide examples for 2 and 3 please? – Blanchard