Chrome 印刷用の CSS で A4 用紙サイズを正しく設定する方法

A4 用紙サイズを設定する CSS

問題:

ユーザーが Web から A4 用紙のシミュレーションを印刷するときに問題が発生していますChrome のページ。コンテンツはクリップされています。要素のサイズが 21cm x 29.7cm に設定されていても、問題は解決しません。

調査:

さらなる分析の結果、根本原因は初期値の割り当てであることが特定されました。印刷メディア ルールのページ幅に適用されます。

幅の影響: Initial:

• Chrome では、親要素の幅に特定の長さが指定されていない場合、印刷メディア ルールの .page 要素内の width:Initial によりページ コンテンツのスケーリングが行われます。

• この結果:

  • コンテンツがページに対して約長すぎます2cm
  • 最初の 2cm を超えるページ パディング
  • 210mm に拡大する前の約 196mm でのコンテンツのレンダリング

解決策:

へこの問題を解決するには、最初のキーワードを避けて、印刷メディア ルールで A4 用紙の幅と高さを html、body、または .page に明示的に設定します。

改訂コード:

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

注: この変更は、元の CSS 設定を維持しながら、スケーリングの問題に対処します。クロム。

以上がChrome 印刷用の CSS で A4 用紙サイズを正しく設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。