Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menetapkan Saiz Kertas A4 dengan betul dalam CSS untuk Pencetakan Chrome?

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

DDD
Lepaskan: 2024-12-12 21:16:12
asal
325 orang telah melayarinya

How to Correctly Set A4 Paper Size in CSS for Chrome Printing?

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 ... */
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan