Durante la stampa, i browser non sanno quanto è ampia la carta

Ho un po ‘di problemi con la stampa di un documento html. A quanto pare i browser non sanno quanto è ampia la carta, e fanno supposizioni selvagge e inesatte!

Il documento è reattivo, mostra layout diversi a diverse larghezze e speravo che durante la stampa prendessero gli stili per circa 700 o 800 pixel, ma non lo facevano. Non tutti loro.

Ho cercato di cambiare le query multimediali da dimensioni in px a unità fisiche ( pt o cm ), ma ciò non ha aiutato.

Ho anche assicurato che i browser fossero tutti impostati per utilizzare lo stesso formato, orientamento e margini della carta e che non avessero impostato alcun flag “scala per adattare la pagina”.

Ecco un violino: http://jsfiddle.net/MrLister/Lc5kE/show
Se ridimensioni un po ‘la finestra, vedrai che mostra quanto è larga. Poi, quando premi Print Preview, è quando va male: IE dice che la larghezza di un A4 è 18,19 cm, Mozilla dice 20.,21 cm e Chrome dice 14. 15 cm. L’opera è la peggiore di tutte: non guarda affatto la carta, prende solo le dimensioni della finestra sullo schermo.
E come ho detto, non c’è differenza se usi unità fisiche o pixel o em .

Quindi sto facendo qualcosa di sbagliato? Sto trascurando qualcosa? C’è qualcosa che posso fare, a meno di forzare un numero di carta fisso (come A4) nelle gole della gente?

Modifica: dopo alcuni test, ho scoperto che IE considera i margini della stampante, mentre Mozilla no. Quindi, se si impostano tutti i margini su zero, IE e Mozilla riportano entrambi 20..21 cm per la larghezza. Gli altri sono ancora molto poco collaborativi.

Il modo più semplice sarà usare ‘%’ invece di ‘cm’.

Il problema, per quanto riguarda l’esempio JSFiddle, è che non hai specificato le larghezze modificate delle div all’interno delle query “@media” min-width / max-width. Poiché le larghezze delle div sono fissate. la pagina stessa non è retriggers. Puoi capire meglio il tuo problema, ridimensionando il tuo browser e vedendo che gli overflow sono mostrati … Quindi in breve la tua pagina non è retriggers per adattarsi alla pagina di stampa .

Inoltre, solo per adattare i div all’interno della pagina di stampa, è ansible utilizzare il seguente codice css:

 @media print{ html, body{ width: 100%; } body div{ max-width: 100%; } } 

(Nota: questo codice non funzionerà sul tuo esempio JSFiddle, dal momento che gli stili di ‘div sono stati specificati in linea.)

Non sei ancora soddisfatto? Usa css transform per ridimensionare la pagina per adattarla alla pagina di stampa. Quando si utilizza questo, non dimenticare di impostare ‘ transform-origin: 0% 0%; ‘.

Ad esempio, il più grande dei tuoi div è largo 31 cm e i margini di solito sono 1 cm. Pertanto, all’interno di una pagina di stampa di larghezza compresa tra 16 cm e 17 cm, è ansible ridimensionarla al 50% e adattare manualmente la pagina alla pagina di stampa.

Il primo metodo è comunque la migliore pratica. Buona fortuna.