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:

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.