Configurazioni schermo

Il responsive web design ha dato per molti versi una reazione agli smartphone. Prima che apparissero gli smartphone, pochissime persone consideravano seriamente come dovrebbero apparire i siti web sui dispositivi portatili. La situazione è cambiata con la rapida ascesa dei telefoni cellulari dotati di browser web integrati.

Il responsive web design ha incoraggiato una mentalità che metteva in discussione le ipotesi. Mentre in precedenza si supponeva che un sito web venisse visualizzato solo su un computer desktop, ora è prassi standard progettare lo stesso sito web anche per telefoni e tablet. Infatti, l'utilizzo dei dispositivi mobili ha ormai superato l'utilizzo dei computer desktop sul web.

Questa mentalità reattiva ti sarà utile per il futuro. È del tutto possibile che i tuoi siti web vengano visualizzati su dispositivi e schermi che oggi non possiamo neanche immaginare. Questo approccio va oltre gli schermi. Anche ora le persone utilizzano dispositivi senza schermo per accedere ai tuoi contenuti. Gli assistenti vocali possono utilizzare i tuoi siti web se utilizzi una solida base di codice HTML semantico.

C'è la sperimentazione anche nel mondo degli schermi. Oggi sul mercato sono disponibili dispositivi dotati di schermi pieghevoli. Ciò introduce alcune sfide per i tuoi progetti.

Doppio schermo

Gli utenti di dispositivi pieghevoli possono scegliere se il browser web deve occupare solo uno degli schermi o se devono estendersi su entrambi gli schermi. Se il browser si estende su entrambi gli schermi, il sito web visualizzato verrà suddiviso in base alla cerniera tra i due schermi. Non sembra perfetto.

Segmenti dell'area visibile

È disponibile una funzionalità multimediale sperimentale progettata per rilevare se il tuo sito web viene visualizzato su un dispositivo a doppio schermo. Il nome proposto per la funzionalità dei contenuti multimediali è viewport-segments. Esistono due varietà: horizontal-viewport-segments e vertical-viewport-segments.

Se la funzionalità multimediale horizontal-viewport-segments riporta il valore 2 e vertical-viewport-segments il valore 1, significa che la cerniera sul dispositivo viene eseguita dall'alto verso il basso, suddividendo i contenuti in due riquadri affiancati.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

Se la funzionalità dei contenuti multimediali vertical-viewport-segments riporta il valore 2 e horizontal-viewport-segments il valore 1, la cerniera scorre da un lato all'altro, dividendo i contenuti in due riquadri, uno sopra l'altro.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

Se vertical-viewport-segments e horizontal-viewport-segments riportano il valore 1, significa che il sito web viene visualizzato su un'unica schermata, anche se il dispositivo ha più di una schermata. Ciò equivale a non utilizzare alcuna query multimediale.

Variabili di ambiente

La funzionalità dei contenuti multimediali di viewport-segments da sola non ti aiuterà a progettare intorno a quella fastidiosa cerniera. Ti serve un modo per conoscere le dimensioni della cerniera. È qui che entrano in gioco le variabili environment.

Le variabili di ambiente in CSS ti consentono di tenere conto delle intrusioni complicate nei dispositivi nei tuoi stili. Ad esempio, puoi progettare intorno alla "notch" su iPhone X utilizzando i valori di ambiente safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom e safe-area-inset-left. Queste parole chiave sono incluse in una funzione env().

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Le variabili di ambiente funzionano come proprietà personalizzate. Ciò significa che puoi passare un'opzione di riserva nel caso in cui la variabile di ambiente non esista.

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

Affinché le variabili di ambiente funzionino su iPhone X, aggiorna l'elemento meta che specifica le informazioni viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Ora il layout di pagina occuperà l'intera area visibile e riempirà in sicurezza il documento con valori inseriti forniti dal dispositivo.

Per gli schermi pieghevoli, vengono proposte sei nuove variabili di ambiente: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom, viewport-segment-right.

di Gemini Advanced.

Ecco un esempio di layout con due colonne, una più larga dell'altra.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

Per i due schermi con cerniera verticale, imposta la prima colonna come larghezza del primo schermo e la seconda colonna come larghezza del secondo schermo.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

Considera il doppio schermo come un'opportunità. Potresti utilizzare una schermata per visualizzare contenuti di testo scorrevoli, mentre l'altra visualizza un elemento fisso come un'immagine o una mappa.

Il futuro

I display pieghevoli diventeranno la prossima grande novità? Chissà. Nessuno avrebbe potuto prevedere quanto sarebbero diventati i dispositivi mobili, quindi vale la pena avere una mentalità aperta sui fattori di forma futuri.

Prima di tutto, vale la pena assicurarsi che i tuoi siti web siano in grado di reagire a ciò che può offrire il futuro. Questo è ciò che ti offre il reattivo design: non solo un insieme di tecniche pratiche, ma una mentalità che ti sarà utile quando creerai il web del futuro.

Verifica le tue conoscenze

Verifica le tue conoscenze sulle configurazioni dello schermo