[검증] 브라우저에서 인쇄된 DPI는 몇 개입니까?
검증 방법
이번에 윈도 7 환경에서 해봤어요.
로컬에서 HTML 파일을 만들고 브라우저에서 열고 A4 용지에 인쇄합니다.
나는 보통 자로 인쇄된 물건을 재고 조사했다.
현미경 등을 사용해 정확하게 측정한 적이 없기 때문에 아마 DPI일 것이다.
시스템 DPI나 모니터 DPI의 영향을 받았는지 확인하기 위해 브라우저에서 인쇄된 DPI는 각각의 값을 변경해 인쇄를 시도했다.
HTML 파일
이번에는 아래의 HTML 파일을 사용하여 인쇄하였다.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>browser - DPI</title>
</head>
<body>
<div style="width:100px; height:100px; background:#03F;"></div>
</body>
</html>
모니터 DPI 설정
시스템 DPI 설정
결실
InternetExplorer, Google Chrome, Firefox, Opera에서 CSS 100px 사각형을 인쇄한 결과는 다음과 같습니다.
Windows7 64bit
모두 약 2.65㎝(약 96DPI) 인쇄됐다.
모니터 DPI, 시스템 DPI 값을 변경해도 인쇄 크기는 변경되지 않으므로 모니터 DPI, 시스템 DPI의 영향을 받지 않습니다.
왜 96DPI입니까?
여기서부터는 추측이기 때문에 확증이 없다.
오류가 있으면 ((\)ω｀ )앵무새
96은 CSS 길이를 정의하는 데 사용되는 값입니다.
CSS의 길이는 상대 단위와 절대 단위 두 가지가 있습니다.
절대 단위는 7개의 단위cm, mm, Q, in, pc, pt, px를 정의합니다.
유닛
이름:
등가
cm
센티미터
1cm = 96px/2.54
mm
밀리미터
1mm = 1/10cm
Q
4분의 1밀리미터
1q = 1/40cm
in
인치
1in = 2.54cm = 96px
pc
오징어
1pc = 1/6 in
pt
주안점
1pt = 1/72 in
px
픽셀
1px = 1/96 in
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>browser - DPI</title>
</head>
<body>
<div style="width:100px; height:100px; background:#03F;"></div>
</body>
</html>
InternetExplorer, Google Chrome, Firefox, Opera에서 CSS 100px 사각형을 인쇄한 결과는 다음과 같습니다.
Windows7 64bit
모두 약 2.65㎝(약 96DPI) 인쇄됐다.
모니터 DPI, 시스템 DPI 값을 변경해도 인쇄 크기는 변경되지 않으므로 모니터 DPI, 시스템 DPI의 영향을 받지 않습니다.
왜 96DPI입니까?
여기서부터는 추측이기 때문에 확증이 없다.
오류가 있으면 ((\)ω｀ )앵무새
96은 CSS 길이를 정의하는 데 사용되는 값입니다.
CSS의 길이는 상대 단위와 절대 단위 두 가지가 있습니다.
절대 단위는 7개의 단위cm, mm, Q, in, pc, pt, px를 정의합니다.
유닛
이름:
등가
cm
센티미터
1cm = 96px/2.54
mm
밀리미터
1mm = 1/10cm
Q
4분의 1밀리미터
1q = 1/40cm
in
인치
1in = 2.54cm = 96px
pc
오징어
1pc = 1/6 in
pt
주안점
1pt = 1/72 in
px
픽셀
1px = 1/96 in
96px 기준.
점 픽셀의 환경에서 1px는 1물리 픽셀이다.
그 환경에서 CSS의 절대 단위는 96 물리 픽셀이 기준이 된다.
CSS에서 5cm 길이의 직사각형을 만들어 인쇄합니다.
CSS의 1cm는 앞의 표와 같이
1cm = 96px / 2.54로 정의됩니다.1cm = 37.7952755...px가 되다.
이번엔 5cm니까 5배인 188.976...px가 지정되었습니다.
방금 검증한 결과 96DPI로 인쇄되었습니다.
1인치는 2.54cm, 1.99685인치는 5cm입니다.
96DPI는 인치당 96px로 인쇄되고
1.9685インチ * 96는 5cm로 인쇄될 때의 픽셀 수로 계산된다.188.976 px.
이것은 아까 CSS에서 지정한 5cm px와 일치합니다.
CSS에서 5cm를 지정하면 5cm로 인쇄됩니다.
CSS의 절대 단위의 기초는 96px이다.
DPI도 96으로 설정하여 같은 크기로 인쇄합니다.
이런 이유로 96DPI의 값이 아닐까 싶습니다.
note
노트도 기사를 공개했으니 관심 있는 분들은 보세요.
・[초보자를 위한 Codriding] PHP의 TODO 앱 코드를 읽어봅시다.
Reference
이 문제에 관하여([검증] 브라우저에서 인쇄된 DPI는 몇 개입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/7968/items/61bce87ec16adafe261c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여([검증] 브라우저에서 인쇄된 DPI는 몇 개입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/7968/items/61bce87ec16adafe261c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
