| 모델 | 외부 화면 (접었을 때) 물리 해상도 | DPR | 외부 화면 CSS 뷰포트 폭 | 내부 화면 (펼쳤을 때) 물리 해상도 | DPR | 내부 화면 CSS 뷰포트 폭 |
|---|---|---|---|---|---|---|
| Galaxy Fold (2019) | 1680 × 720 | 2 | 360px | 2152 × 1536 | 2 | 768px |
| Galaxy Z Fold2 (2020) | 2260 × 816 | 2 | 408px | 2208 × 1768 | 2 | 884px |
| Galaxy Z Fold3 (2021) | 2268 × 832 | 2 | 416px | 2208 × 1768 | 2 | 884px |
| Galaxy Z Fold4 (2022) | 2316 × 904 | 2.5 ~ 3 | 376px (DPR3) / 452px (DPR2) | 2176 × 1812 | 2 | 906px |
| Galaxy Z Fold5 (2023) | 2316 × 904 | 3 | 376px | 2176 × 1812 | 2 | 906px |
| Galaxy Z Fold6 (2024) | 2376 × 968 | 2 | 484px | 2160 × 1856 | 2 | 1080px |
| Galaxy Z Fold7 (2025) | 2520 × 1080 | 3 | 360px | 2184 × 1968 | 2 | 1092px |
360px ~ 484px 범위@media (max-width: 500px) { /* 접었을 때 (외부 화면) 스타일 */
}
768px ~ 1100px 범위@media (min-width: 900px) { /* 펼쳤을 때 (내부 화면) 스타일 */
}
min-width 기준 : 모바일 퍼스트 접근(기본 스타일은 모바일용 → 점점 화면 커질 때 새로운 스타일 덮어쓰기)에 적합.
max-width 기준 : 데스크톱 퍼스트 접근(기본 스타일은 데스크톱용 → 화면 줄어들 때 스타일 덮어쓰기)에 적합.
둘 중 모바일기준으로 올라가느냐? 데스크톱 기준으로 내려가느냐?
한쪽에 맞춰서 일괄성있게 작업하는게 편하긴함.