iPhone Güvenli Alan Simülatörü ve CSS Oluşturucu

iPhone güvenli alan boşluklarını dikey ve yatay konumda karşılaştırın. Sabit düğmelerin örtüşmesini önizleyin ve duyarlı CSS veya Tailwind kodunu kopyalayın.

Tarayıcınızda çalışır · Hesap gerekmez

Cihaz

Yön

Bölgeleri göster

Yalnızca şemadır; kamera boşluğu ve köşeler temsili olarak gösterilir.

Referans kenar payları pt

Üst: 0
Sağ: 84
Alt: 34
Sol: 0

Mantıksal ekran: 466 × 678 pt
Güvenli alan ölçüleri: 382 × 644 pt
Doğal çözünürlük: 1398 × 2034 px
İşleme ölçeği: 3×

Bu değerler hakkında

Veri güncelleme tarihi 2026-09-26

İçerik boşluğu16 px

iPhone Duo'nun mantıksal boyutları ve kenar payları iOS 27.1 simülatör referanslarını kullanır; yatay görünüm sola yatay yerleşimi temel alır. İç ekranda durum çubuğu görünür kalır. Koyu bloklar sisteme ayrılan bölgeleri gösterir. 669 × 951 pt simülatör yerleşimi ve resmî 1878 × 2670 px panel çözünürlüğü ayrı değerlerdir; doğrudan 3× dönüşüm değildir. Bu sayfa fiziksel cihaz ölçümleri yerine tamamen açık ve kapalı durumları gösterir.

Uyarlanabilir yerleşim kodu

Kod, seçilen cihazın sabit değerleri yerine canlı env() değerlerini kullanır. Boşluk ayarı çıktıyı değiştirir; örnek anahtarı yalnızca yerleşimleri karşılaştırır. Sayfa, sabit çubuk ve 44px düğmesi için yer ayırır. Daha uzun içeriği, Safari ve PWA davranışını projenizde test edin.

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

Bu tarayıcının güvenli alanı

Tarayıcı değerleri okunuyor…

Seçilen hazır ayardan bağımsız, bu tarayıcıdan alınan canlı CSS px değerleridir. Masaüstünde veya dikdörtgen görünüm alanında sıfır doğru olabilir. Döndürme veya yeniden boyutlandırma değerleri değiştirebilir; bu işlev cihazınızı tanımlamaz veya Safari'yi taklit etmez.

iPhone güvenli alan referans tablosu

Dikey değerler, durum çubuğu görünürken standart ekran büyütmesinde mantıksal punto (pt) cinsindedir. Güvenli ölçüler, ilgili iki kenar payının mantıksal ekran boyutundan çıkarılmasıyla bulunur. Hazır ayarlar cihaz testinin yerini tutmaz.

iPhone güvenli alan referans tablosu — Dikey
Cihaz	Mantıksal ekran	Üst (pt)	Alt (pt)	Sağ (pt)	Güvenli alan ölçüleri
iPhone Duo · Dış · Kapalı	466 × 678	0	34	84	382 × 644
iPhone Duo · İç · Açık	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

Nasıl kullanılır?

Referans ölçülerini incelemek için bir cihaz ve yön seçin.
Yerleşim örneğini açın, güvenli alan kenar paylarını açıp kapatın ve düğmenin konumunu karşılaştırmak için boşluğu ayarlayın.
CSS veya Tailwind kodunu kopyalayın, ardından hedef tarayıcı ve cihazınızda kontrol edin.

Örnek

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

Ayrıntılar ve sınırlamalar

CSS px, yerel yerleşim puntosu ve fiziksel piksel farklı birimlerdir. iPhone 13 mini, 3× ölçekte işler ancak doğal çözünürlüğüne küçülterek örnekler.

Güvenli alanlar işletim sistemi sürümüne, ekran büyütmesine, tarayıcı denetimlerine ve uygulama yerleşimine göre değişebilir. Gösterilen kamera boşluğu, üretimde kullanılacak bir tasarım şablonu değildir.

FAQ

Bu tarayıcı neden 0px gösteriyor?

Dikdörtgen bir görünüm alanında güvenli olmayan bölge bulunmayabilir. Bir iPhone hazır ayarı seçseniz bile masaüstü tarayıcıları sıklıkla sıfır döndürür; hazır ayarı değiştirmek tarayıcınızı değiştirmez.

Sabit 34px alt boşluk kopyalayabilir miyim?

Kendi boşluğunuzla birlikte env(safe-area-inset-bottom, 0px) kullanın. Sabit bir değer yatay görünüme, farklı cihazlara veya tarayıcı koşullarına uyum sağlamaz.

Araç sayfasının güncellenme tarihi: 2026-09-27