px, dpr, dpi, dip 완전히 이해하기

서론

media query 를 사용하면서부터 이러한 것들의 의미를 이해하는 데 상당한 시간이 걸렸습니다

디바이스 픽셀

디바이스 픽셀（Device Pixels）: 디바이스 화면의 물리적 픽셀로, 단위는 px입니다. 예를 들어 iPhone6 의 750x1334px

P.S. 절대 길이 단위（예: in, mm）가 아니라 화면에 몇 개의 점을 깔 수 있는지를 나타냅니다. 내 점과 당신의 점의 크기는 다르기 때문입니다

해상도

해상도（Resolution）역시 물리적 개념으로, 그 의미는 대상에 따라 다릅니다

화면의 경우, 해상도는 일반적으로 표시되는 물리적 픽셀의 총합을 나타냅니다. 예를 들어, iPhone6 화면 해상도는 750x1334px라고 말합니다

이미지의 경우, 개념은 이미지 크기, 이미지 사이즈, 픽셀 사이즈 등과 동일합니다. 예를 들어, 20x20px의 icon 이라고 말합니다

P.S. 엄밀히 말하면, 이미지 해상도의 단위는 ppi（Pixels Per Inch）입니다. 이미지 파일의 경우, 그 픽셀 사이즈는 일정하며, 해상도 200ppi 등 카메라로부터의 meta 정보를 포함할 수 있습니다. 이 값은 권장값일 뿐이며, 이미지를 표시했을 때 보이는 사이즈는 화면의 픽셀 밀도에 의해 결정됩니다. 픽셀 밀도가 높을수록 이미지는 더 작게 보입니다

CSS 픽셀

CSS 픽셀（CSS Pixels）: Web 프로그래밍의 개념으로, CSS 스타일 코드에서 사용되는 논리 픽셀을 가리킵니다

따라서, 1 개의 CSS 픽셀은 다른 디바이스에서 서로 다른 물리적 픽셀 수에 해당할 수 있으며, 이 비율은 디바이스의 속성（Device Pixel Ratio, 디바이스 픽셀 비율）입니다

CSS 규격에서, 길이 단위는 절대 단위와 상대 단위로 나눌 수 있습니다. px 는 상대 단위로, 디바이스 픽셀（Device Pixels）에 대한 상대 단위입니다. 예를 들어 iPhone5 는 Retina 视网膜 화면을 사용하며, 2x2의 Device Pixel 로 1x1의 CSS Pixel 을 나타내므로, 디바이스 픽셀 수는 640x1136px, CSS 논리 픽셀 수는 320x568px입니다

디바이스 픽셀 비율

디바이스 픽셀 비율의 약칭은 DPR 또는 DPPX 로, 다음과 같습니다:

Device Pixel Ratio: Number of device pixels per CSS Pixel
Dots Per Pixel: the amount of device pixels per CSS pixel (e.g. in Retina displays this will be 2).

보통 DPR 이라고 합니다. wiki 정의:

Device pixel ratio, the ratio between physical pixels and logical pixels used by cascading style sheets (CSS): other names for it are "CSS Pixel Ratio" and "dppx"

따라서, 디바이스 픽셀 비율은 1 개의 CSS 픽셀（너비）이 몇 개의 물리적 픽셀（너비）에 해당하는지를 나타냅니다:

DPR = 물리적 픽셀 수 / 논리적 픽셀 수

예를 들어 dpr=2일 때, 1 개의 CSS 픽셀은 4 개의 물리적 픽셀 점으로 구성됩니다. 위의 CSS 픽셀 설명을 참조하십시오

P.S. DPR 은 단위가 아니라 속성명입니다. 예를 들어 브라우저에서는 window.devicePixelRatio로 화면의 DPR 을 가져옵니다

특별 주의: zxx 의 설명:

window.devicePixelRatio 는设备上의 물리적 픽셀과 디바이스 독립 픽셀 (device-independent pixels (dips)) 의 비율입니다.

수식으로 나타내면: window.devicePixelRatio = 물리적 픽셀 / dips

여기서의 "디바이스 독립 픽셀"은 논리적 픽셀, 즉 CSS 픽셀을 가리키며, 이 역시 속성명입니다. Android 의 단위 dip/dp와 혼동하지 마십시오. 양자 사이에는 아무런 관계도 없습니다. 영어는 같고 의미도 거의 같지만, 그것은 Android 고유의 이야기이며, 일반적이지 않습니다

픽셀 밀도

픽셀 밀도는 표시 밀도 또는 화면 밀도라고도 하며, 약칭은 DPI(Dots Per Inch) 또는 PPI(Pixel Per Inch) 로, 의미는 동일합니다

전문적으로는 보통 PPI 라고 합니다. 미세한 차이는 다음과 같습니다:

ppi 와 dpi（매 인치 도트 수）. 기술적인 관점에서 말하면, "픽셀"（p）은 컴퓨터 표시 영역에만 존재하며, "도트"（d）는 인쇄 또는 프린트 영역에만 나타납니다.

같은 사이즈의 화면이라도 픽셀 사이즈가 다른 경우가 많습니다. 이는 DPI 의 차이입니다. 예를 들어 4.7 인치의 iPhone6 픽셀 사이즈는 750x1334px, 4.7 인치의 HTC One 픽셀 사이즈는 1080x1920px입니다

픽셀 밀도는 쉽게 계산할 수 있습니다. 예를 들어 iPhone6 의 경우:

// 화면 대각선의 픽셀 사이즈 / 물리적 사이즈（inch）
Math.sqrt(750*750 + 1334*1334) / 4.7 = 326ppi

생활 사례:

Windows 에서 해상도를 변경하는 것은~~픽셀 밀도~~（픽셀 밀도는 속성이며, 화면의 물리적 픽셀 사이즈와 물리적 사이즈는 고정되어 있으므로 고정 불변）디바이스 픽셀 비율입니다. 따라서 같은 이미지라도 다른 해상도의 디바이스에서는 표시 사이즈가 다릅니다.픽셀디바이스 픽셀 비율이 낮을수록, 논리 해상도가 높아집니다（dpr=1일 때 논리 해상도=물리 해상도）. 이미지 표시 사이즈는 작아집니다（자로 화면을 재십시오）. 예를 들어 Windows 의 1920x1080 해상도에서는 데스크톱 아이콘/폰트가 1366x768보다 작아집니다. 이미지 뷰어 도구로 이미지를 확대할 수 있지만, 실제로는 소프트웨어 보간을 통해 픽셀 데이터를 시뮬레이션하여 너비와 높이의 픽셀 수를 늘린 것이므로, 매우 크게 확대하면 선명하지 않게 됩니다（왜곡됨）. 축소할 때도 동일한 문제가 있습니다

출력의 마지막 순간: 예를 들어 표시, 또는 프린트, 또는 현상 시의 DPI 설정이야말로 최종 출력 사이즈를 결정하는 핵심 설정입니다. 바디가 파일을 형성할 때 표시되는 180DPI나 72DPI 등은 설정된 임시 파라미터에 불과합니다. 따라서 사진 인화에는 촌사진, 2 촌사진 등이 있습니다

카메라 내 EXIF 에 표시되는 DPI 나 photoshop 에 표시되는 DPI 는 카메라와 PS 가 최종적으로 사용하는 프린터의 DPI 를 알지 못하며, 웹상에 배치하기 위한 것인지도 알지 못하므로, 최종 출력 대상을勝手に 가정한 수치에 불과하며, 실제로는 아무런 의미가 없습니다

디바이스 독립 픽셀

보통 Google 이 Android 의 대량의 이상한 화면을 적응시키기 위해 제안한 것을 가리킵니다. Windows 에도 이 개념이 있지만, 의미는 다릅니다. IOS 에는 디바이스 독립 픽셀이라는说法는 없는 것 같습니다

디바이스 독립 픽셀을단위로 사용하는 것은, 보통 Android 개발에서의 것으로, 약칭은 DIP(Device Independent Pixels) 또는 DP(Density-independent Pixels) 로, 의미는 완전히 일치합니다

Android 기기의 특징은 화면 사이즈가 다양하다는 것으로, 표시를 가능한 한 디바이스와 무관하게 하기 위해 dip 를 제안했습니다. 참조하는 density 는 160 입니다. 계산식은 다음과 같습니다:

// 화면 밀도가 160（단위는 ppi 또는 dpi, 같은 의미）일 때, px === dip
px = dip * density / 160 
// 따라서
dip = px * 160 / dpi

물론, 이 두 식은 Android 디바이스에만 적용되며, 이 dip 는다른 곳에 가져가도 의미가 없습니다

뷰포트（viewport）

데스크톱에서는 뷰포트 너비가 브라우저 너비와 같지만, 휴대폰에서는 다릅니다.

레이아웃 뷰포트

휴대폰에서는 데스크톱 브라우저용으로 설계된 사이트를 수용하기 위해, 기본 레이아웃 뷰포트 너비가 화면 너비보다 훨씬 크며, 사용자에게 사이트의 전체 모습을 보여주기 위해 사이트를 축소합니다
비주얼 뷰포트

화면의 가시 영역, 즉 물리적 픽셀 사이즈입니다
이상 뷰포트

사이트가 휴대폰용으로 준비되어 있을 때 사용합니다. meta 로 선언합니다. 초기 iPhone 의 이상 뷰포트는 320x480px였습니다

따라서, 줌이 없는 경우, 화면의 CSS 픽셀 너비는 실제로는 이상 뷰포트의 너비를 가리킵니다. meta 태그:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

는 레이아웃 뷰포트=이상 뷰포트를 지정하며, 줌을 금지합니다. 따라서 width=device-width의 viewport meta 를 추가하면 페이지가 커집니다（처음에는 페이지 콘텐츠가 너무 작아서 읽을 수 없습니다）. 실제로는 레이아웃 뷰포트가 작아진 것입니다

서론