- 논리적 픽셀 크기
window.innerWidth: 1512
window.innerHeight: 982
=> 논리적 픽셀 크기: 1512x982.
i.e) 뷰포트 크기와 동일하게 동작함. 디스플레이 해상도는 물리적 픽셀 크기를 뜻함.
- DPR & 운영체제 배율
window.devicePixelRatio: 1.25
i.e) DPR(픽셀 비율): 1.25
=> 운영체제 배율(125%)은 자동으로 브라우저에서 DPR에 반영됨. 운영체제 배율과 DPR은 다른 개념!!!
Ex)
고해상도 이미지는 DPR 기반으로 제공
@media screen and (min-resolution: 192dpi) {
.image {
background-image: url('image@2x.png');
}
}텍스트와 레이아웃은 DPR을 기준으로 조정
html {
font-size: calc(100vw / 1920 * 16); /* 기준 너비에 따라 동적으로 조정 */
}
💯💯💯
운영체제 배율 고려는 선택사항.
DPR은 브라우저가 운영체제 배율을 반영하여 자동으로 계산하므로, DPR을 기준으로 개발하는 것이 일반적입니다.
운영체제 배율은 특수한 경우(레이아웃 문제, 고해상도 환경의 비정상적 렌더링 등)에만 추가로 고려합니다.
IF) DPR이 1이라면, 논리적 픽셀과 물리적 픽셀은 동일함. But, DPR=2와 같은 상황에서는 물리적 픽셀 2x2가 논리적으로 하나의 픽셀을 담당하므로 더 선명하게 보임.
- Aspect Ratio
: 1512 / 982 = 1.54
=> 1.54:1 이라는 얘기. 3:2와 비슷함.
논리적 픽셀 크기를 개발자도구 디바이스 툴 바에 적용시키면 비율이 1512 / 982로 유지되면서 자동으로 Aspect Ratio가 1.54로 설정된다. 논리적 픽셀 크기 설정하면 Aspect Ratio는 자동으로 따라옴.
- 총정리 (디자인 개발 환경 설정)
개발자 도구 디바이스 툴바의 Emulated Device에서 설정한 논리적 픽셀 크기, DPR
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aspect Ratio Example</title>
<style>
.container {
width: 100%; /* 화면 크기 기준 */
aspect-ratio: 1512 / 982; /* 비율 1.54:1 */
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>테스트 코드
- 논리적 픽셀 크기를 기준으로 레이아웃을 설계.
- 필요 시 DPR을 사용해 고해상도 이미지와 스타일 대응.
- 개발자 도구
console.log(`Width: ${window.innerWidth}px`);
console.log(`Height: ${window.innerHeight}px`);
console.log(`DPR: ${window.devicePixelRatio}`);
console.log(`Aspect Ratio: ${(window.innerWidth / window.innerHeight).toFixed(2)}`);
각각의 논리적 픽셀 크기(뷰포트), 픽셀 비율(DPR), 화면 비율(aspect-ratio) 조회하는 방법
💯💯💯
- DPR
- 설정된 DPR은 화면 확대/축소나 고해상도 디스플레이에서의 렌더링에 영향을 줍니다.
- 예: DPR이 2인 경우, 브라우저는 2x 해상도로 이미지를 요청합니다(image@2x.png).
- 개발자도구 디스플레이 툴바
- 크롬 개발자 도구는 운영체제 배율을 반영하지 않고, DPR 값만 기준으로 디바이스를 에뮬레이션합니다.
- 실제 디바이스 테스트가 필요하다면 실제 디바이스 환경에서 테스트하는 것이 좋습니다.
=> 물리적 화면 크기나 운영체제 배율은 고려하지 못함.
- 내 디바이스
물리적 픽셀 크기: 1920x1080
논리적 픽셀 크기: 1536x738 (1536에 스크롤바 크기가 포함됨. 논리적 픽셀)
DPR: 1.25
운영체제 배율: 125%
aspect-ratio: 1536 / 738 = 1.54
1920/1.25 = 1536 (outerWidth크기임. 스크롤바가 포함됨.)
1080/1.25 = 864 (outerWidth크기임. 상단바, 하단바가 포함됨.)
😎😎😎
논리적 픽셀 크기 즉, window.innerWidth에 스크롤바가 포함되는 이유는 오버레이 스크롤이기 때문.
오버레이 스크롤: 브라우저와 운영체제 설정에 따름, 스크롤바가 콘텐츠 영역 위에 렌더링 됨. 콘텐츠가 스크롤바에 의해 잘리거나 공간을 차지하지 않음.
=> 렌더링된 콘텐츠가 스크롤바에 가려지지 않음. 뷰포트 전체 크기에서 스크롤바가 차지하는 공간은 없음.
※ 주의
오버레이 스크롤 vs overflow: scroll
두 가지는 다름. 후자는 스크롤바 너비를 고려해야 함.
- 스크롤바 너비 계산 방법
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
console.log(`스크롤바 너비: ${scrollbarWidth}px`);
- window.innerWidth: 스크롤바 포함된 뷰포트 너비.
- document.documentElement.clientWidth: 스크롤바를 제외한 실제 렌더링 가능한 영역
=> 브라우저에서 자동 생성되는 오버레이 스크롤은 디자인과 개발 시 고려할 필요 없음.
'WEB' 카테고리의 다른 글
| [Web] 디스플레이 해상도에 따른 실 사용자 뷰포트 고려 (0) | 2025.05.06 |
|---|---|
| [WEB] 웹 앱 vs 모바일 웹 총정리 (0) | 2024.10.11 |
| [WEB] 피그마 협업 시 1배수 디자인 고려할 점(해상도, 배율, 뷰포트) (0) | 2024.09.24 |
| [WEB] 디스플레이 해상도 (0) | 2024.09.22 |
| [WEB] 적응형/반응형, 모바일웹/웹앱 (0) | 2024.08.22 |
