Wie kann ich A4-Papier zum Drucken in Chrome mithilfe von CSS genau simulieren?

Anpassen von CSS, um A4-Papier zu simulieren und genaues Drucken zu ermöglichen

Um ein simuliertes A4-Papier im Web zu erstellen, das in Chrome präzise gedruckt wird, sind bestimmte CSS erforderlich Anpassungen sind notwendig. Während die angegebenen Abmessungen von 21 cm x 29,7 cm für die Elementgröße möglicherweise korrekt erscheinen, wird die Seite beim Drucken oder Erstellen einer Druckvorschau abgeschnitten.

Behebung des Problems

Nach weiteren Untersuchungen liegt die Ursache in der Zuweisung von „initial“ zur Seitenbreite innerhalb der Printmedienregel. Die Verwendung von „initial“ für die Breite in Chrome führt zu einer Skalierung, wenn für die übergeordneten Elemente kein spezifischer Längenwert definiert ist. Dies führt dazu, dass die Seite zu lang ist und die Polsterung größer als die vorgesehenen 2 cm ist.

Lösung

Um dieses Problem zu beheben, ersetzen Sie „initial“ durch das tatsächliche Papier Breite (210 mm) und Höhe (297 mm) in der Druckmedienregel. Wenden Sie dies auf „html“, „body“ oder direkt auf das „.page“-Element an.

html, body {
  width: 210mm;
  height: 297mm;
}

Beispiel

Der folgende überarbeitete CSS-Code enthält die Vorgeschlagene Lösung:

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... other print styles ... */
}

Kompatibilität

Diese Lösung wird erfolgreich gelöst das Druckproblem in Chrome (getestet auf verschiedenen Betriebssystemplattformen) unter Beibehaltung der Funktionalität in anderen Browsern.

Das obige ist der detaillierte Inhalt vonWie kann ich A4-Papier zum Drucken in Chrome mithilfe von CSS genau simulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!