Simulator Area Aman iPhone dan Pembuat CSS
Bandingkan jarak tepi area aman iPhone dalam orientasi potret dan lanskap. Lihat pratinjau tumpang tindih tombol berposisi tetap dan salin kode CSS responsif atau Tailwind.
Berjalan di browser Anda · Tanpa akun
Hanya diagram; lubang kamera dan sudut ditampilkan sebagai ilustrasi.
Jarak tepi acuan pt
- Atas
- 0
- Kanan
- 84
- Bawah
- 34
- Kiri
- 0
- Layar logis
- 466 × 678 pt
- Dimensi area aman
- 382 × 644 pt
- Resolusi asli
- 1398 × 2034 px
- Skala render
- 3×
Data diperbarui
Ukuran logis dan jarak tepi iPhone Duo menggunakan acuan simulator iOS 27.1; orientasi lanskap menggunakan tata letak landscape-left. Layar bagian dalam tetap menampilkan bilah status. Blok gelap menandai area yang dicadangkan untuk sistem. Tata letak simulator 669 × 951 pt dan resolusi panel resmi 1878 × 2670 px merupakan nilai yang terpisah, bukan hasil konversi langsung 3×. Halaman ini menampilkan kondisi terbuka penuh dan tertutup, bukan hasil pengukuran perangkat fisik.
Kode tata letak adaptif
Kode menggunakan nilai env() aktual, bukan angka tetap dari perangkat yang dipilih. Perubahan jarak memengaruhi kode keluaran; sakelar demo hanya membandingkan tata letak. Halaman menyediakan ruang untuk bilah berposisi tetap beserta tombolnya yang berukuran 44px. Uji konten yang lebih tinggi serta perilaku Safari dan PWA dalam proyek Anda.
Area aman browser ini
Membaca nilai browser…
Nilai CSS px aktual dari browser ini, terlepas dari preset yang dipilih. Nilai nol dapat benar pada desktop atau dalam viewport persegi panjang. Nilai dapat berubah saat Anda memutar perangkat atau mengubah ukuran; fitur ini tidak mengidentifikasi perangkat Anda atau meniru Safari.
Tabel acuan area aman iPhone
Nilai potret dalam satuan titik logis (pt), pada zoom tampilan standar dengan bilah status terlihat. Dimensi area aman diperoleh dengan mengurangi ukuran layar logis dengan kedua jarak tepi yang bersesuaian. Preset tidak menggantikan pengujian pada perangkat.
| Perangkat | Layar logis | Atas (pt) | Bawah (pt) | Kiri (pt) | Kanan (pt) | Dimensi area aman |
|---|---|---|---|---|---|---|
| iPhone Duo · Luar · Tertutup | 466 × 678 | 0 | 34 | 0 | 84 | 382 × 644 |
| iPhone Duo · Dalam · Terbuka | 669 × 951 | 82 | 34 | 0 | 0 | 669 × 835 |
| iPhone 16 Pro | 402 × 874 | 62 | 34 | 0 | 0 | 402 × 778 |
| iPhone 16 Pro Max | 440 × 956 | 62 | 34 | 0 | 0 | 440 × 860 |
| iPhone 14 Pro | 393 × 852 | 59 | 34 | 0 | 0 | 393 × 759 |
| iPhone 13 mini | 375 × 812 | 50 | 34 | 0 | 0 | 375 × 728 |
| iPhone 12 | 390 × 844 | 47 | 34 | 0 | 0 | 390 × 763 |
| iPhone 11 | 414 × 896 | 48 | 34 | 0 | 0 | 414 × 814 |
| iPhone X | 375 × 812 | 44 | 34 | 0 | 0 | 375 × 734 |
| iPhone SE (3rd gen) | 375 × 667 | 20 | 0 | 0 | 0 | 375 × 647 |
Cara penggunaan
- Pilih perangkat dan orientasi untuk melihat dimensi acuannya.
- Buka Demo tata letak, aktifkan atau nonaktifkan jarak tepi area aman, lalu sesuaikan jarak konten untuk membandingkan posisi tombol.
- Salin kode CSS atau Tailwind, lalu periksa pada browser dan perangkat tujuan Anda.
Contoh
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
Detail dan batasan
CSS px, titik tata letak native, dan piksel fisik merupakan satuan yang berbeda. iPhone 13 mini merender pada skala 3×, lalu menurunkan resolusi hasilnya ke resolusi asli.
Area aman dapat berubah sesuai versi OS, zoom tampilan, kontrol browser, dan tata letak aplikasi. Ilustrasi lubang kamera bukan templat desain untuk produksi.
FAQ
Mengapa browser ini menampilkan 0px?
Viewport persegi panjang mungkin tidak memiliki area yang tidak aman. Browser desktop sering mengembalikan nilai nol meskipun Anda memilih preset iPhone; mengganti preset tidak mengubah browser Anda.
Bolehkah saya menyalin padding bawah dengan nilai tetap 34px?
Gunakan env(safe-area-inset-bottom, 0px) dengan jarak yang Anda tentukan sendiri. Nilai tetap tidak menyesuaikan dengan orientasi lanskap, perangkat lain, atau kondisi browser yang berbeda.
Alat terkait
Halaman alat diperbarui: