Search code examples
htmlcssgoogle-chromemedia-queries

Why website printed with Chrome is using mobile layout?

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 and you will see in the preview that it's using the mobile layout (see image below).

The Verge printed with Chrome

While in Firefox, it uses around 900px (see image below).

enter image description here

Is there a way to make it print Desktop layout?

I know I can work around this by changing my mobile breakpoint to 568px, but I need my website to break in 768px for iPad.

Solution

  • 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.