Chrome 인쇄를 위해 CSS에서 A4 용지 크기를 올바르게 설정하는 방법은 무엇입니까?

A4 용지 크기를 설정하는 CSS

문제:

사용자가 웹에서 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의 크기 조정 문제를 해결합니다.

위 내용은 Chrome 인쇄를 위해 CSS에서 A4 용지 크기를 올바르게 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!