Orientamento portrait: definizione, esempi e CSS

Orientamento verticale significa che lo schermo è più alto che largo (l'altezza è maggiore della larghezza). Orientamento orizzontale è l'opposto: più largo che alto. Gli usi tipici dell'orientamento verticale includono feed per smartphone, articoli, moduli e chat. L'orizzontale è adatto a video, mappe e dashboard che richiedono spazio orizzontale. Il rapporto d'aspetto (come 9:16 in verticale o 16:9 in orizzontale) descrive la relazione tra larghezza e altezza; l'orientamento indica solo quale lato è più lungo.

Esempio portrait vs landscape

Se hai cercato un'immagine dell'orientamento verticale, questa vista affiancata è l'idea: un riquadro alto e uno largo sulla stessa classe di dispositivo.

Il verticale restringe l'attenzione in uno scroll verticale. L'orizzontale espone più colonne e UI affiancate. Sono contesti di layout, non solo etichette di rotazione.

L'orientamento non è la stessa cosa della risoluzione o del rapporto d'aspetto. Due dispositivi possono entrambi essere in modalità verticale usando dimensioni e rapporti di pixel diversi. I layout responsive dovrebbero basarsi sulla forma del viewport, non su un singolo modello di telefono.

Orientamento verticale in CSS

Usa CSS quando la rotazione deve modificare spaziatura o struttura. Il @media (orientation: portrait) query corrisponde ai viewport in cui l'altezza è maggiore della larghezza. MDN lo documenta sotto media features di orientamento.

/* Default: portrait-first single column */
.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.sidebar {
  display: none;
}

@media (orientation: landscape) {
  .page {
    grid-template-columns: 280px 1fr;
  }

  .sidebar {
    display: block;
  }
}

@media (orientation: portrait) {
  .hero {
    padding-block: 24px;
  }
}

Parti dall'orientamento che la maggior parte degli utenti vede per primo, poi aggiungi le regole per landscape. Evita altezze di viewport fisse che si rompono quando appare la tastiera o la barra del browser. Testa form e header sticky in entrambi gli orientamenti su hardware reale.

Per JavaScript che deve reagire alla rotazione (grafici, mappe, shell custom), ascolta gli screen.orientation eventi change o confronta window.innerHeight a window.innerWidth. Mantieni il layout in CSS quando possibile.

Bloccare l'orientamento nelle app mobile e Capacitor

I browser trattano il blocco dell'orientamento come una preferenza. Le app native e Capacitor progetti possono forzare la direzione dello schermo per schermata quando la rotazione comprometterebbe il task (sign-in, pagamento, flussi kiosk).

Il @capgo/capacitor-screen-orientation Il plugin legge la modalità corrente, blocca portrait per una route e sblocca quando l'utente lascia quella schermata. Vedi il Documentazione del plugin Screen Orientation per i dettagli su API.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

await ScreenOrientation.lock({ orientation: 'portrait' });

const { type } = await ScreenOrientation.orientation();
console.log(type);

await ScreenOrientation.unlock();

Blocca con parsimonia. Se la rotazione modifica solo gli spazi, adatta il layout. Quando blocchi, collega lock e unlock al ciclo di vita della pagina in modo che le schermate media e impostazioni possano ancora usare l'orientamento orizzontale. Per modelli di layout più ampi su iOS e Android, consulta le best practice di UI e UX cross-platform per le app Capacitor.

FAQ

Cos'è l'orientamento verticale?

L'orientamento verticale significa che lo schermo è più alto che largo. L'altezza è maggiore della larghezza, quindi i lati lunghi corrono verticalmente. I telefoni tenuti in posizione verticale per la lettura, le chat o lo scrolling sono solitamente in orientamento verticale.

Qual è la differenza tra orientamento verticale e orizzontale?

Il verticale è più alto che largo. L'orizzontale è più largo che alto. Lo stesso dispositivo passa da uno all'altro quando viene ruotato, ma il rapporto d'aspetto e lo spazio di layout cambiano, quindi l'UI dovrebbe adattarsi e non solo allungarsi.

Come uso @media (orientation: portrait) in CSS?

Aggiungi una media query con @media (orientation: portrait) { ... } per applicare gli stili quando l'altezza del viewport supera la sua larghezza. Abbinala a regole di layout per il landscape usando @media (orientation: landscape) quando ti servono entrambe le forme.

Cosa significa cambiare orientamento su un telefono o in un'app?

Cambiare orientamento significa ruotare il dispositivo o consentire all'app di ruotare, in modo che lo schermo passi tra portrait e landscape. Sul web, le dimensioni del viewport si invertono. Nelle app native e Capacitor, il sistema operativo può anche animare la transizione e aggiornare le safe area.

Cos'è l'orientamento dei contenuti?

L'orientamento dei contenuti riguarda come il contenuto è disposto rispetto al frame, non solo il verso in cui si tiene il dispositivo. Uno schermo in portrait potrebbe comunque mostrare un grafico o un video orizzontale con le bande nere. Adatta layout e media al task, non solo all'angolo predefinito del dispositivo.

Puoi mostrare un esempio di portrait vs landscape?

Sì. Il portrait è un frame verticale in cui l'altezza è maggiore della larghezza. Il landscape è un frame orizzontale in cui la larghezza è maggiore dell'altezza. Scorri fino al diagramma sotto Esempio portrait vs landscape per l'immagine con le etichette.

Se distribuisci app con Capacitor e hai bisogno di un controllo sull'orientamento insieme a fix rapidi dopo il rilascio, Capgo merita un'occhiata. Offre live updates per app CapacitorJS ed Electron e mantiene plugin per funzionalità delle app come l'orientamento dello schermo, che può aiutare quando devi bloccare o abilitare viste specifiche senza ricostruire l'intero processo di rilascio.