iPhone Simulatore di area sicura e generatore CSS — Numio

Confronta i riquadri dell'area sicura dell'iPhone in verticale e in orizzontale. Visualizza l'anteprima della sovrapposizione dei pulsanti fissi e copia il codice CSS o Tailwind reattivo.

Funziona nel browser · Nessun account richiesto

Dispositivo

Orientamento

Mostra le aree

Solo schema illustrativo: il ritaglio della fotocamera e gli angoli sono indicativi.

Margini di riferimento pt

Superiore: 0
Destro: 84
Inferiore: 34
Sinistro: 0

Schermo logico: 466 × 678 pt
Dimensioni dell’area sicura: 382 × 644 pt
Risoluzione nativa: 1398 × 2034 px
Scala di rendering: 3×

Informazioni su questi valori

Dati aggiornati 2026-09-26

Spaziatura del contenuto16 px

Le dimensioni logiche e i margini di iPhone Duo si basano sui riferimenti del simulatore iOS 27.1; in orizzontale viene usato il layout landscape-left. Lo schermo interno mantiene visibile la barra di stato. I blocchi scuri indicano aree riservate al sistema. Il layout del simulatore da 669 × 951 pt e la risoluzione ufficiale del pannello da 1878 × 2670 px sono valori distinti, non una conversione diretta 3×. Questa pagina mostra gli stati completamente aperto e chiuso, non misurazioni di un dispositivo fisico.

Codice per il layout adattivo

Il codice usa i valori env() effettivi, non i valori fissi del dispositivo selezionato. La spaziatura modifica il codice generato; l’interruttore della demo serve solo a confrontare i layout. La pagina riserva spazio alla barra fissa e al suo pulsante da 44px. Verifica contenuti più alti, Safari e il comportamento PWA nel tuo progetto.

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

Area sicura di questo browser

Lettura dei valori del browser…

Valori CSS px effettivi di questo browser, indipendenti dal preset selezionato. Zero può essere corretto su desktop o in un viewport rettangolare. I valori possono cambiare quando ruoti o ridimensioni la finestra; questa lettura non identifica il dispositivo e non emula Safari.

Tabella di riferimento delle aree sicure di iPhone

Valori in verticale espressi in punti logici (pt), con zoom dello schermo standard e barra di stato visibile. Le dimensioni dell’area sicura si ottengono sottraendo i due margini corrispondenti alle dimensioni dello schermo logico. I preset non sostituiscono i test sul dispositivo.

Tabella di riferimento delle aree sicure di iPhone — Verticale
Dispositivo	Schermo logico	Superiore (pt)	Inferiore (pt)	Destro (pt)	Dimensioni dell’area sicura
iPhone Duo · Esterno · Chiuso	466 × 678	0	34	84	382 × 644
iPhone Duo · Interno · Aperto	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

Come si usa

Seleziona un dispositivo e un orientamento per esaminarne le dimensioni di riferimento.
Apri Demo del layout, attiva o disattiva i margini dell’area sicura e regola la spaziatura per confrontare la posizione del pulsante.
Copia il codice CSS o Tailwind, quindi verificalo nel browser e sul dispositivo di destinazione.

Esempio

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

Dettagli e limiti

CSS px, punti dei layout nativi e pixel fisici sono unità diverse. iPhone 13 mini esegue il rendering a 3× ma riduce poi l’immagine alla risoluzione nativa.

Le aree sicure possono cambiare con la versione del sistema operativo, lo zoom dello schermo, i controlli del browser e il layout dell’app. Il ritaglio illustrato non è un modello di design per la produzione.

FAQ

Perché questo browser mostra 0px?

Un viewport rettangolare potrebbe non avere aree non sicure. I browser desktop spesso restituiscono zero anche se selezioni un preset iPhone; cambiare il preset non modifica il browser.

Posso copiare un padding inferiore fisso di 34px?

Usa env(safe-area-inset-bottom, 0px) con la spaziatura desiderata. Un valore fisso non si adatta all’orientamento orizzontale, ad altri dispositivi o a condizioni diverse del browser.

Pagina aggiornata: 2026-09-27