Perché il sito Web stampato con Chrome utilizza il layout mobile?

In Chrome, quando si stampa su carta A4, viene eseguito il rendering con larghezza della query media 568px .

Prova a stampare un sito web reattivo come The Verge o Bootstrap e vedrai nell’anteprima che sta usando il layout mobile (vedi immagine sotto).

The Verge stampato con Chrome

Mentre in Firefox, utilizza circa 900px (vedi immagine sotto).

inserisci la descrizione dell'immagine qui

C’è un modo per farlo stampare il layout del desktop ?

So che posso aggirare questo problema modificando il mio punto di interruzione mobile su 568px, ma ho bisogno che il mio sito web diventi 768px per iPad.

The Verge non sta utilizzando un layout mobile per la stampa. Sta usando il proprio layout di stampa. Se si ispeziona la pagina mentre si emula un supporto di print , verrà visualizzato un carico di media="print" dichiarazioni di media="print" . Questo è caricato attraverso l’HTML:

  

Se desideri che un sito Web appaia diverso durante la stampa rispetto a quello sui dispositivi mobili, specifica semplicemente lo screen all’interno delle tue query multimediali mobili:

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

Durante la stampa, la dichiarazione screen verrà ignorata, ignorando così completamente la query sui media mobili .

Basta aggiungere questo ai tuoi fogli di stile

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

Ho trovato la risposta da questo link e il suo funzionamento perfettamente … Bootstrap 3 Pages Printing Mobile Version