CSS를 사용하여 Chrome에서 인쇄용 A4 용지를 정확하게 시뮬레이션하는 방법은 무엇입니까?

CSS를 조정하여 A4 용지를 시뮬레이션하고 정확한 인쇄 가능

Chrome에서 정확하게 인쇄하는 웹에서 시뮬레이션된 A4 용지를 만들려면 특정 CSS 조정이 필요합니다. 요소 크기에 대해 제공된 치수인 21cm x 29.7cm가 올바르게 나타날 수 있지만 인쇄하거나 인쇄 미리 보기를 생성할 때 페이지가 잘립니다.

문제 해결

추가 조사 결과 근본 원인은 인쇄 매체 규칙 내에서 페이지 너비에 "초기"를 할당하는 데 있습니다. Chrome에서 너비에 "초기"를 사용하면 상위 요소에 대해 특정 길이 값이 정의되지 않은 경우 크기가 조정됩니다. 이로 인해 페이지가 너무 길어지고 패딩이 의도한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!