Wie stelle ich das A4-Papierformat in CSS für Chrome-Druck richtig ein?

CSS zum Festlegen des A4-Papierformats

Problem:

Benutzer haben Schwierigkeiten, eine A4-Papiersimulation aus dem Internet zu drucken Seite in Chrome, wobei der Inhalt abgeschnitten ist. Das Problem besteht weiterhin, obwohl die Elementgröße auf 21 cm x 29,7 cm eingestellt ist.

Untersuchung:

Nach weiterer Analyse wurde die Grundursache in der Zuweisung des Anfangswerts identifiziert auf die Seitenbreite in der Printmedienregel.

Auswirkung der Breite: initial:

• In Chrome führt width: initial innerhalb des .page-Elements gemäß der Printmedienregel zu einer Skalierung des Seiteninhalts, wenn für die Breite bei übergeordneten Elementen keine bestimmte Länge angegeben ist.

• Dies führt dazu:

  • Der Inhalt ist ungefähr um einiges zu lang für die Seite 2 cm
  • Seitenabstand überschreitet die anfänglichen 2 cm
  • Rendering des Inhalts bei ca. 196 mm vor der Skalierung auf 210 mm

Lösung:

Um dieses Problem zu beheben, legen Sie explizit A4 fest Papierbreite und -höhe in der Druckmedienregel auf HTML, Body oder .page umstellen, wobei das anfängliche Schlüsselwort vermieden wird.

Überarbeiteter Code:

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

Hinweis:Diese Änderung behält die ursprünglichen CSS-Einstellungen bei und behebt gleichzeitig das Skalierungsproblem in Chrome.

Das obige ist der detaillierte Inhalt vonWie stelle ich das A4-Papierformat in CSS für Chrome-Druck richtig ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!