iPhone Screen Orientation CSS

Portrait o Landscape? La risoluzione dell’iphone può cambiare in base all’orientamento dello stesso. Un sito web progettato per essere visualizzato […]
iPhone Screen Orientation CSS

Portrait o Landscape?

La risoluzione dell’iphone può cambiare in base all’orientamento dello stesso. Un sito web progettato per essere visualizzato in modalità Portrait e cioè se utilizzi l’iphone verticalmente, potrebbe non risultare graficamente gradevole nella versione Landscape e viceversa.

Media

Come differenziare quindi le due versioni? Partendo dal presupposto che l’html resta invariato per entrambe, l’unico elemento sul quale possiamo agire è il CSS e più in particolare definendo due link a due differenti stili di pagina.

<head>
    <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
</head>

Meta

Un altro piccolo problema legato al cambio di orientamento dell’iphone riguarda la scalabilità del documento che stai visualizzando. Capita che se switchi da landscape a portrait o viceversa il layout non si adatti di conseguenza al viewport massimo del device. Ti troverai a dover gestire una fastidiosa scrollbar orizzontale per poter visualizzare per intero il template. Per evitare che il sito web possa sbordare oltre i limiti di visibilità del device stesso , imposta questo meta che definisce il lo “scale” iniziale e massimo. Impostandoli entrambi ad 1 avrai la certezza che il tuo template occupi sempre il 100% dello spazio disponibile.

<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
</head>

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github