Sto provando a utilizzare @media print insieme a min-width e max-width per indirizzare il formato carta attualmente selezionato, per ottimizzare la stampa su carta di formato normale (ad esempio lettera) rispetto a carta di dimensioni fotografiche (in genere 4x6) . Ma le query sui media non sembrano valutate correttamente.Perché le query del supporto della larghezza di stampa sono errate?
Ecco un esempio del mio HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="photo.css">
</head>
<body>
<div class="post">
<div class="info">CSS: </div>
</div>
</body>
</html>
Ecco un frammento del mio file CSS:
@media print {
@page {
margin: 0.5in;
}
}
@media print and (max-width: 12.0in) and (min-width:11.0in) {
.info:after {
content: "Matched 11 to 12"
}
}
@media print and (max-width: 11.0in) and (min-width:10.0in) {
.info:after {
content: "Matched 10 to 11"
}
}
@media print and (max-width: 10.0in) and (min-width:9.1in) {
.info:after {
content: "Matched 9 to 10"
}
}
Ho quelli per ogni larghezza verso il basso per 1 a 2 pollici di larghezza.
Quando si seleziona carta 8,5x11, verticale, vedo "CSS: Corrispondente da 5 a 6". Mi aspetterei di vedere "CSS: Matched 7 a 8", a causa del margine di 0,5 pollici.
Quando si seleziona carta 8.5x11, orizzontale, vedo "CSS: Corrispondente da 7 a 8". Mi aspetto di vedere "CSS: Matched 9 to 10" (di nuovo, a causa dello 0.5in margini sinistro e destro).
Quando si seleziona carta 4x6, verticale, vedo "CSS: Corrispondente 2 a 3". Il che è corretto, perché 4 - (2 * 0.5) = 3. Ma quando viene selezionato landscape, vedo "CSS: Matched 3 to 4", quando mi aspetterei di vedere "CSS: Matched 4 to 5".
Sto facendo tutto questo in Chrome, File-> Stampa.
Cosa mi sto sbagliando?
Giusto per essere chiari, il problema è che la query multimediale sembra sempre essere per una pagina molto più piccola della pagina effettiva. –
hai provato a rimuovere i margini? – dippas
Hai provato a utilizzare un re setter CSS? – GibboK