Why website printed with Chrome is using mobile layout?

Question

In Chrome, when printing to A4 paper, it is rendered with 568px media query width.

Try printing a responsive website such as The Verge or Bootstrap

Answer 1

The Verge isn't using a mobile layout for printing. It's using its own print layout. If you inspect the page whilst emulating a media of print you'll see a load of media="print" declarations. This is loaded in through the HTML:

<link href="..." media="print" rel="stylesheet" type="text/css">

If you want a website to look different when printing than it does on mobile, simply specify screen within your mobile media queries:

@media screen and (max-width: 768px) {
    ...
}

When printing, the screen declaration will be ignored, thus completely ignoring your mobile media query.

Answer 2

Just add this to your style sheets

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