L'un des concepts clés de tout design réactif est le changement de taille de la fenêtre d'affichage. Cela s'explique par le fait que les fenêtres mobiles diffèrent grandement des fenêtres de bureau. Pour contrôler la taille de la fenêtre d'affichage, nous utilisons traditionnellement la balise meta viewport.
Cependant, la balise meta viewport, comme tous les pires développements de navigateur de la dernière fois, n’est pas valide pour le W3C. Il a été initialement introduit par Apple dans Safari et a depuis été adopté par d’autres navigateurs. Cela se traduit par une implémentation incohérente.
Heureusement, le W3C est à nouveau à notre disposition en introduisant la règle CSS @viewport.
En utilisant l’ancienne approche de la balise meta, c’est ainsi que nous indiquons au navigateur quelle taille la fenêtre devrait voir comme:
En plus d'être invalide, l'instruction viewport n'est pas une donnée, c'est une présentation. Donc, en respectant nos principes de séparation des données et des présentations, l'instruction de la fenêtre doit être en CSS et non en HTML.
La solution W3C en CSS ressemble à ceci:
@viewport {width: device-width;}Ou bien, vous pouvez définir la fenêtre avec un numéro, comme ceci:
@viewport {width: 640px;}Vous pouvez utiliser la règle @viewport conjointement avec les requêtes @media pour forcer toute fenêtre de taille supérieure à 960 à réduire à 960 pixels, comme ceci:
@media screen and (min-width: 960px){@viewport {width: 960px;}}La règle @viewport nous permet également de zoomer sur une page par défaut et même de définir le zoom maximum:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}Il est possible de bloquer complètement le zoom en définissant la propriété user-zoom sur fixed. Cependant, le zoom, en particulier sur les smartphones, est nécessaire pour l'accessibilité et je vous recommande d'utiliser cette propriété.
Une autre propriété très utile nous permet de verrouiller notre page Web en mode paysage ou portrait:
@viewport {orientation: landscape;}Voici la mauvaise nouvelle: actuellement, cette règle est uniquement prise en charge par Internet Explorer 10 et Opera, et requiert respectivement les préfixes de navigateur -ms- et -o-.
Bien que ce soit pour le moins décevant, le fait que la fonctionnalité de viewport soit déjà disponible dans la plupart des navigateurs devrait signifier que cette règle est simple à prendre en compte. J'espère que nous commencerons à le voir très prochainement.
Vous souciez-vous de la conformité aux normes? Le W3C aide-t-il ou empêche-t-il les progrès sur le web? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image de la fenêtre via Photos LostBob