Công cụ mô phỏng vùng an toàn trên iPhone và tạo CSS

So sánh khoảng chừa vùng an toàn của iPhone ở hướng dọc và ngang. Xem trước tình trạng chồng lấn của nút cố định và sao chép mã CSS hoặc Tailwind thích ứng.

Chạy trong trình duyệt · Không cần tài khoản

Thiết bị

Hướng màn hình

Hiển thị các vùng

Chỉ là sơ đồ; phần khuyết camera và các góc mang tính minh họa.

Khoảng chừa tham chiếu pt

Trên: 0
Phải: 84
Dưới: 34
Trái: 0

Kích thước màn hình logic: 466 × 678 pt
Kích thước vùng an toàn: 382 × 644 pt
Độ phân giải gốc: 1398 × 2034 px
Tỷ lệ kết xuất: 3×

Về các giá trị này

Dữ liệu được cập nhật 2026-09-26

Khoảng cách nội dung16 px

Kích thước logic và khoảng chừa của iPhone Duo dùng tham chiếu trình mô phỏng iOS 27.1; hướng ngang dùng bố cục xoay ngang sang trái. Màn hình trong giữ thanh trạng thái hiển thị. Các khối tối đánh dấu vùng dành riêng cho hệ thống. Bố cục mô phỏng 669 × 951 pt và độ phân giải tấm nền chính thức 1878 × 2670 px là các giá trị riêng biệt, không phải phép chuyển đổi trực tiếp 3×. Trang này hiển thị trạng thái mở hoàn toàn và đóng hoàn toàn, không phải số đo từ thiết bị thực.

Mã bố cục thích ứng

Mã sử dụng giá trị env() trực tiếp, không dùng số cố định của thiết bị đã chọn. Khoảng cách làm thay đổi mã đầu ra; công tắc minh họa chỉ dùng để so sánh bố cục. Trang dành chỗ cho thanh cố định và nút 44px của thanh đó. Hãy kiểm tra nội dung cao hơn, hành vi của Safari và PWA trong dự án của bạn.

<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>

Vùng an toàn của trình duyệt này

Đang đọc giá trị trình duyệt…

Giá trị CSS px trực tiếp từ trình duyệt này, độc lập với cấu hình có sẵn đã chọn. Giá trị 0 có thể đúng trên máy tính hoặc trong vùng hiển thị hình chữ nhật. Giá trị có thể thay đổi khi xoay hay đổi kích thước; chức năng này không nhận diện thiết bị hay mô phỏng Safari.

Bảng tham chiếu vùng an toàn iPhone

Giá trị hướng dọc theo điểm logic (pt), ở mức thu phóng màn hình tiêu chuẩn với thanh trạng thái hiển thị. Kích thước vùng an toàn bằng kích thước màn hình logic trừ hai khoảng chừa tương ứng. Cấu hình có sẵn không thay thế việc kiểm tra trên thiết bị.

Bảng tham chiếu vùng an toàn iPhone — Dọc
Thiết bị	Kích thước màn hình logic	Trên (pt)	Dưới (pt)	Phải (pt)	Kích thước vùng an toàn
iPhone Duo · Màn hình ngoài · Đóng	466 × 678	0	34	84	382 × 644
iPhone Duo · Màn hình trong · Mở	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

Cách sử dụng

Chọn thiết bị và hướng màn hình để xem kích thước tham chiếu.
Mở Minh họa bố cục, bật/tắt khoảng chừa vùng an toàn và điều chỉnh khoảng cách để so sánh vị trí nút.
Sao chép mã CSS hoặc Tailwind rồi kiểm tra trên trình duyệt và thiết bị mục tiêu.

Ví dụ

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

Chi tiết và giới hạn

CSS px, điểm bố cục gốc và pixel vật lý là các đơn vị khác nhau. iPhone 13 mini kết xuất ở tỷ lệ 3× rồi giảm xuống độ phân giải gốc.

Vùng an toàn có thể thay đổi theo phiên bản hệ điều hành, mức thu phóng màn hình, các thanh điều khiển trình duyệt và bố cục ứng dụng. Phần khuyết được minh họa không phải mẫu thiết kế dùng cho sản phẩm thực tế.

FAQ

Tại sao trình duyệt này hiển thị 0px?

Vùng hiển thị hình chữ nhật có thể không có vùng không an toàn. Trình duyệt máy tính thường trả về 0 ngay cả khi bạn chọn cấu hình iPhone; đổi cấu hình không làm thay đổi trình duyệt.

Có thể sao chép khoảng đệm dưới cố định 34px không?

Hãy dùng env(safe-area-inset-bottom, 0px) cùng khoảng cách của bạn. Giá trị cố định không thích ứng với hướng ngang, thiết bị khác hay điều kiện trình duyệt khác.

Trang công cụ được cập nhật: 2026-09-27