Bootstrap 3 pages Print mobile version

Question

When we print pages from our Bootstrap 3-based website, they print on some browsers showing the mobile version. I have Googled to try to find a good solution, but actually nothing was found.

Using the same CSS for the screen and adding the “hidden print” class to a specific DIV, our pages look great using Safari on a Mac, but using Chrome on a Mac or Firexof and Chrome on a PC, the preview shows that the mobile version.

Is there an easy way to tell the browser that the width of the viewport is a regular screen and not a phone (XS), or do we need to enable many complex grid changes, etc.

Answer 1

Adding a print request worked for me. This is what I finally stumbled upon.

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

The dimensions of 330 mm and 427 mm were exactly those that seemed suitable for my breakpoint of 1170 pixels. (They also make up 8.5 / 11).

EDIT: As tony-payne said, this most likely only works for Chrome. In my case, that was good. Just added a print warning script 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

This is a known issue mentioned in white papers :

Printer widgets

Even in some modern browsers, printing can be fancy. In particular, with Chrome v32 and regardless of field settings, Chrome uses a viewport width that is significantly narrower than the size of physical paper when resolving media queries when printing a web page. This can lead to the fact that when printing, the ultra-small Bootstrap grid is suddenly activated. See # 12078 for some details. Suggested workarounds:

• Trim the extra small grid and make sure your page looks acceptable.
• Adjust @screen-* Less variables to make your printer paper more than small.
• Adding custom media queries to change grid breakpoints for print media only.

Answer 3

Something that worked for me ...

in bootstrap grid.scss find:

  @include make-grid(xs); 

then add below:

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