아이폰 해상도
| 모델 | 해상도(px) | 개발기준(px) | 디스플레이 타입 |
|---|---|---|---|
| 아이폰 5, 5S, SE (1st gen) | 640×1136 | 320×568 | Retina |
| 아이폰 6, 6S, 7, 8, SE (2nd, 3rd gen) | 750×1334 | 375×667 | Retina HD |
| 아이폰 6 Plus, 6S Plus, 7 Plus, 8 Plus | 1080×1920 | 414×736 | Retina HD |
| 아이폰 X, XS, 11 Pro | 1125×2436 | 375×812 | Super Retina HD |
| 아이폰 XR, 11 | 828×1792 | 414×736 | Liquid Retina HD |
| 아이폰 XS Max, 11 Pro Max | 1242×2688 | 414×896 | Super Retina HD |
| 아이폰 12 Mini, 13 Mini | 1080×2340 | 375×812 | Super Retina XDR |
| 아이폰 12, 12 Pro, 13, 13 Pro, 14 |
1170×2532 | 390×844 | Super Retina XDR |
| 아이폰 12 Pro Max, 13 Pro Max, 14 Plus |
1284×2778 | 428×926 | Super Retina XDR |
| 아이폰 14 Pro, 15, 15 Pro | 1179×2556 | 393×852 | Super Retina XDR |
| 14 Pro Max, 15 Plus, 15 Pro Max |
1290×2796 | 430×932 | Super Retina XDR |
아이패드 해상도
| 모델 | 해상도(px) | 개발기준(px) | 디스플레이 타입 |
|---|---|---|---|
| 아이패드, 아이패드mini | 2048×1536 | 1024×768 | Retina |
| 아이패드Pro 10.2" | 2160×1620 | 1080×810 | Retina |
| 아이패드Pro 10.9" | 2360×1640 | 1180×820 | |
| 아이패드Pro, 아이패드Air 10.5" | 2224×1668 | 1112×834 | |
| 아이패드mini 8.3" | 2266×1488 | 1133×744 | |
| 아이패드 프로 11" (1st, 2nd, 3rd gen) | 2388×1688 | 1194×834 | Liquid Retina |
| 아이패드 프로 12.9" (3rd, 4th, 5th gen) | 2732×2048 | 1366×1024 | Liquid Retina XDR |
개발 시 고려해야 할 참고사항
- 반응형 디자인 (Responsive Design)
: 다양한 화면 크기와 해상도에 대응할 수 있도록 미디어 쿼리를 활용하여 반응형 디자인을 구현합니다. 이를 통해 동일한 웹 페이지가 여러 디바이스에서 최적화된 형태로 보일 수 있습니다. - 뷰포트 설정 (Viewport Setting)
: HTML 문서의<head>섹션에 적절한<meta>태그를 사용하여 뷰포트를 설정합니다. - 이미지 최적화
: 고해상도 디스플레이를 위해 고해상도 이미지를 제공하되, 로딩 속도를 고려하여 최적화된 이미지를 사용합니다.srcset속성을 활용하여 다양한 해상도의 이미지를 제공할 수 있습니다. - 터치 인터페이스 고려
: 터치 인터페이스를 고려하여 버튼 크기, 간격 등을 충분히 크게 설정합니다. 일반적으로 터치 영역은 최소 44x44 픽셀을 권장합니다. - 텍스트 크기
: 가독성을 위해 텍스트 크기를 적절하게 설정하고, 사용자 확대를 막지 않도록 합니다.
Layout | Apple Developer Documentation
A consistent layout that adapts to various contexts makes your experience more approachable and helps people enjoy their favorite apps and games on all their devices.
developer.apple.com
728x90
반응형
'WWWEB > DESIGN' 카테고리의 다른 글
| 포토샵 pixel aspect ratio correction is for preview purposes only. turn it off for maximum image quality. 간단 해결법 (0) | 2024.01.01 |
|---|---|
| [Mobile.벤치] 트립닷컴 호텔 UI/UX (feat.webm) (1) | 2023.12.20 |
| Pretendard 웹폰트 적용하기 (1) | 2023.10.11 |
| 디자인 시스템 정의 및 가이드 예시 (0) | 2023.09.07 |
| [Design] 153로지틱스 (#animation #반응형) (0) | 2023.08.11 |
| 포토샵 손바닥툴 stuck버그 (0) | 2023.07.03 |
| [벤치] 네이버 활용백서 (0) | 2023.06.15 |
| 아이들과 다녀온 호크니 전시회 (0) | 2023.05.26 |
댓글