CSS 스타일링

Apple iPhone 주요 해상도
기기 CSS 해상도(Viewport) 실제 해상도
iPhone SE 375 × 667 750 × 1334
iPhone 12 / 13 / 14 390 × 844 1170 × 2532
iPhone 12 Pro Max / 13 Pro Max 428 × 926 1284 × 2778
iPhone 14 Pro / 15 Pro 393 × 852 1179 × 2556
iPhone 14 Pro Max / 15 Pro Max 430 × 932 1290 × 2796
Samsung Electronics 갤럭시 주요 해상도
기기 CSS 해상도(Viewport) 실제 해상도
Galaxy S20 / S21 / S22 360 × 800 1080 × 2400
Galaxy S23 360 × 780 1080 × 2340
Galaxy S23 Ultra 412 × 915 1440 × 3088
Galaxy S24 384 × 854 1080 × 2340
Galaxy S24 Ultra 412 × 915 1440 × 3120
Galaxy Z Fold 펼침 768 × 1024 근처 1812 × 2176
Galaxy Z Flip 360 × 800 1080 × 2640
퍼블리싱 실무 기준

실제로는 “기기별 실제 해상도”보다
아래 Viewport 폭 기준으로 반응형을 많이 잡는다.

가장 많이 체크하는 폭
종류 기준
작은 모바일 360px
일반 아이폰 390px
큰 아이폰 430px
태블릿 768px
노트북 1280px
PC 1440px ~ 1920px
추천 반응형 기준
/* 모바일 */
@media(max-width:767px)

/* 태블릿 */
@media(max-width:1024px)

/* 노트북 */
@media(max-width:1440px)
사용자 스타일 기준 추천

사용자는:

영상
큰 타이포
풀스크린 레이아웃
시네마틱 구성

을 자주 쓰는 편이라
특히 아래 해상도를 꼭 확인하는 게 좋다.

360px (삼성 기본)
390px (아이폰 기본)
430px (프로맥스 계열)

이 세 개에서 안 깨지면 모바일 대응이 꽤 안정적이다.