CSS を使用して Chrome で印刷する A4 用紙を正確にシミュレートするにはどうすればよいですか?

A4 用紙をシミュレートし、正確な印刷を可能にする CSS の調整

Chrome で正確に印刷できるシミュレートされた A4 用紙を Web で作成するには、特定の CSS調整が必要です。指定された要素サイズの 21cm x 29.7cm は正しく見えるかもしれませんが、印刷または印刷プレビューの生成時にページが切り取られます。

問題への対処

さらに調査した結果、根本的な原因は、印刷メディア ルール内でページ幅に「初期」を割り当てていることにあります。 Chrome で幅に「initial」を使用すると、親要素に特定の長さの値が定義されていない場合、スケーリングが行われます。この結果、ページが長すぎ、パディングが意図した 2cm よりも大きくなります。

解決策

この問題を修正するには、「initial」を実際の用紙に置き換えます。印刷メディアルールの幅（210mm）と高さ（297mm）。これを「html」、「body」、または「.page」要素に直接適用します。

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

例

次の改訂された CSS コードには、提案されたソリューション:

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

互換性

このソリューションは、他のブラウザーの機能を維持しながら、Chrome での印刷の問題を正常に解決します (さまざまな OS プラットフォームでテスト済み)。

以上がCSS を使用して Chrome で印刷する A4 用紙を正確にシミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。