Uno dei concetti chiave in ogni design reattivo è il cambiamento delle dimensioni della finestra. Questo perché le finestre mobili variano notevolmente rispetto alle finestre desktop. Per controllare le dimensioni del viewport usiamo tradizionalmente il meta tag viewport.
Tuttavia, il meta tag viewport, come tutti i peggiori sviluppi del browser dell'ultimo per sempre, non è valido per il W3C. È stato originariamente introdotto da Apple in Safari e da allora è stato adottato da altri browser. Ciò si traduce in un'implementazione incoerente.
Fortunatamente, il W3C è tornato in nostro soccorso ancora una volta introducendo la regola CSS @viewport.
Usando il vecchio approccio del meta tag, questo è il modo in cui dovremmo dire al browser quali dimensioni deve essere vista la vista come:
Indipendentemente dall'essere non valido, l'istruzione viewport non è data, è la presentazione. Quindi, attenendosi ai nostri principi di separazione dei dati e delle presentazioni, l'istruzione viewport deve essere in CSS, non in HTML.
La soluzione W3C in CSS assomiglia a questo:
@viewport {width: device-width;}In alternativa, puoi impostare il viewport con un numero, ad esempio:
@viewport {width: 640px;}Puoi utilizzare la regola @viewport insieme alle query @media per forzare qualsiasi viewport maggiore di 960 a ridursi a 960px, in questo modo:
@media screen and (min-width: 960px){@viewport {width: 960px;}}La regola @viewport ci consente anche di ingrandire una pagina per impostazione predefinita e persino di impostare lo zoom massimo:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}È possibile bloccare completamente lo zoom impostando la proprietà zoom dell'utente su fissa. Tuttavia lo zoom, soprattutto sugli smartphone, è necessario per l'accessibilità e consiglio l'utilizzo di questa proprietà.
Un'altra proprietà molto utile ci consente di bloccare la nostra pagina Web in modalità orizzontale o verticale:
@viewport {orientation: landscape;}Ecco le cattive notizie: attualmente questa regola è supportata solo da Internet Explorer 10 e Opera, e richiede rispettivamente i prefissi dei browser -ms- e -o-.
Anche se a dir poco deludente, il fatto che la funzionalità viewport sia già disponibile nella maggior parte dei browser dovrebbe significare che questa è una semplice regola da raccogliere. Spero che inizieremo a vederlo introdotto nelle build notturne molto presto.
Ti interessa la conformità agli standard? Il W3C aiuta o ostacola il progresso sul web? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine della finestra tramite le foto di LostBob