Bagaimana untuk Menetapkan Saiz Kertas A4 dengan betul dalam CSS untuk Pencetakan Chrome?

CSS untuk Tetapkan Saiz Kertas A4

Masalah:

Pengguna mengalami kesukaran mencetak simulasi kertas A4 daripada web halaman dalam Chrome, dengan kandungan dipotong. Isu ini berterusan walaupun saiz elemen ditetapkan kepada 21cm x 29.7cm.

Penyiasatan:

Selepas analisis lanjut, punca punca dikenal pasti sebagai memberikan nilai awal kepada lebar halaman dalam peraturan media cetak.

Impak lebar: inisial:

• Dalam Chrome, lebar: awal dalam elemen .halaman di bawah peraturan media cetak membawa kepada penskalaan kandungan halaman jika tiada panjang khusus disediakan untuk lebar pada elemen induk.

• Ini mengakibatkan:

  • Kandungan menjadi terlalu panjang untuk halaman dengan lebih kurang 2cm
  • Pelapik halaman melebihi 2cm awal
  • Pembentukan kandungan pada kira-kira 196mm sebelum berskala sehingga 210mm

Penyelesaian:

Untuk menyelesaikan masalah ini, tetapkan lebar dan tinggi kertas A4 secara eksplisit dalam peraturan media cetak kepada html, kandungan atau .halaman, mengelakkan kata kunci awal.

Kod Disemak:

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

Nota: Pengubahsuaian ini mengekalkan tetapan CSS asal sambil menangani masalah penskalaan dalam Chrome.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Saiz Kertas A4 dengan betul dalam CSS untuk Pencetakan Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!