如何在CSS中正確設定Chrome列印的A4紙張尺寸？

CSS 設定A4 紙張尺寸

問題：

使用者在從網路模擬時遇到困難紙張模擬時遇到困難中的頁面，內容被剪裁。即使單元尺寸設定為 21cm x 29.7cm，問題仍然存在。

調查：

經過進一步分析，根本原因是分配了初始值列印媒體規則中的頁寬。

寬度的影響：初始：

• 在Chrome 中，如果父元素上沒有為寬度提供特定長度，則列印媒體規則下的.page元素內的width: 初始會導致頁面內容縮放。

• 這會導致：

  • 內容對於頁面來說太長大約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中正確設定Chrome列印的A4紙張尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！