iPhone 안전 영역 시뮬레이터와 CSS 생성기

iPhone의 가로·세로 안전 영역과 화면 크기를 확인하고 고정 버튼의 겹침을 비교하세요. CSS 또는 Tailwind 코드를 복사할 수 있습니다.

브라우저에서 실행 · 가입 불필요

기기

화면 방향

영역 표시

설명용 그림입니다. 카메라와 모서리는 정확한 외형이 아닙니다.

참고 여백 pt

위: 0
오른쪽: 84
아래: 34
왼쪽: 0

논리 화면 크기: 466 × 678 pt
안전 영역 크기: 382 × 644 pt
물리 해상도: 1398 × 2034 px
렌더링 배율: 3×

값 설명

데이터 업데이트 2026-09-26

콘텐츠 간격16 px

iPhone Duo의 논리 크기와 여백은 iOS 27.1 시뮬레이터 참고값이며 가로는 왼쪽 회전 기준입니다. 내부 화면은 상태 표시줄을 유지하며 진한 블록은 시스템 예약 영역입니다. 내부 논리 크기 669 × 951 pt와 공식 물리 해상도 1878 × 2670 px는 별도 값으로 단순히 3배 변환할 수 없습니다. 완전히 펼친 상태와 닫힌 상태의 예시이며 실제 기기 측정값은 아닙니다.

반응형 레이아웃 코드

선택한 기기의 고정값 대신 실시간 env()를 사용합니다. 간격은 코드에 반영되며 데모 스위치는 비교용입니다. 고정 바와 44px 버튼 공간을 확보합니다. 더 높은 콘텐츠와 Safari·PWA 동작은 프로젝트에서 확인하세요.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<style>
  .safe-page {
    box-sizing: border-box;
    min-height: 100dvh;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
  }
  .safe-bottom-bar {
    position: fixed;
    inset: auto 0 0;
    box-sizing: border-box;
    padding: 16px;
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    background: #fff;
    color: #171717;
  }
  .safe-bottom-bar button { min-height: 44px; width: 100%; }
</style>

<main class="safe-page"><!-- Page content --></main>
<footer class="safe-bottom-bar"><button>Continue</button></footer>

현재 브라우저의 안전 영역

브라우저 값을 읽는 중…

프리셋과 무관한 현재 브라우저의 CSS px 값입니다. 데스크톱이나 직사각형 뷰포트에서 0은 정상일 수 있습니다. 회전과 크기 변경 시 값이 달라집니다. 기기를 식별하거나 Safari를 에뮬레이션하지 않습니다.

iPhone 안전 영역 참고표

표준 화면 배율에서 상태 표시줄을 표시한 세로 방향의 논리 포인트(pt)입니다. 안전 영역 크기는 논리 화면 크기에서 양쪽 여백을 뺀 값입니다. 실제 기기에서도 확인하세요.

iPhone 안전 영역 참고표 — 세로
기기	논리 화면 크기	위 (pt)	아래 (pt)	오른쪽 (pt)	안전 영역 크기
iPhone Duo · 외부 화면 · 닫힘	466 × 678	0	34	84	382 × 644
iPhone Duo · 내부 화면 · 펼침	669 × 951	82	34	0	669 × 835
iPhone 16 Pro	402 × 874	62	34	0	402 × 778
iPhone 16 Pro Max	440 × 956	62	34	0	440 × 860
iPhone 14 Pro	393 × 852	59	34	0	393 × 759
iPhone 13 mini	375 × 812	50	34	0	375 × 728
iPhone 12	390 × 844	47	34	0	390 × 763
iPhone 11	414 × 896	48	34	0	414 × 814
iPhone X	375 × 812	44	34	0	375 × 734
iPhone SE (3rd gen)	375 × 667	20	0	0	375 × 647

사용 방법

기기와 방향을 선택해 참고 크기와 여백을 확인하세요.
레이아웃 데모에서 안전 영역 적용과 간격을 바꿔 버튼 위치를 비교하세요.
CSS 또는 Tailwind 코드를 복사하고 대상 브라우저와 기기에서 테스트하세요.

예제

padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));

세부 정보 및 제한 사항

CSS px, 네이티브 pt, 물리 픽셀은 다릅니다. iPhone 13 mini는 3배 렌더링 후 물리 해상도로 축소합니다.

OS, 화면 배율, 브라우저 바, 앱 레이아웃에 따라 값이 변합니다. 카메라 그림은 정확한 디자인 템플릿이 아닙니다.

FAQ

왜 브라우저 값이 0px인가요?

직사각형 뷰포트에는 피할 영역이 없을 수 있습니다. iPhone 프리셋을 선택해도 데스크톱 브라우저는 보통 0을 반환합니다.

아래 여백을 34px로 고정해도 되나요?

env(safe-area-inset-bottom, 0px)에 원하는 간격을 더하세요. 고정값은 가로 방향이나 다른 기기에 대응하지 못합니다.

도구 페이지 업데이트: 2026-09-26