Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Un Petit Conseil: N'oublie pas la Balise Viewport Meta

by
Length:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Explaining the “Details” and “Summary” Elements

French (Français) translation by Viktoriana Kostov (you can also view the original English article)

Je me souviens de mon voyage inaugural en web design responsive: j'ai utilisé une grille classique, j'étais aux prises avec la mise en page flexible, et j'ai abordé les Media Queries pour la première fois. Le changement de la taille de la fenêtre du navigateur donnait un resultat satisfaisant de mon design qui répondait à son cadre. Ensuite, j'ai testé sur un portable. Ça n'a pas marché - je voyais la version miniature du design pour le plein écran. La solution, il s'est trouvé, était simple...

Note: Ce tutoriel était publié la première fois en fevrier 2012, mais il est souvent cité comme référence dans autres tutoriaux ( et les choses ont changé ), donc j'ai estimé que la mise à jour était justifié.

Les enjeux

Même si tu ne continues pas à lire, emporte un petit conseil de cet article: si tu crées le design flexible, utilise la balise Viewport Meta dans le <head>. Dans la forme basique, elle te donnera une tranquilite d'esprit pour la mise en page sur différents appareils :

Le problème

Prenons l'example de la mise ne scène que j'ai monté. Regarde-la; tu vas observer comment le design s'adapte aux dimensions de la fenêtre de ton navigateur. Il y a aussi une seule Media Query que élargit le texte et change la couleur du titre en #ff333e sur les ecrans plus larges. Joli.

Voilà comment la page se présente en OSX Chrome:

viewport-chrome-correct

Et voici à quoi rassemble le design avec la fenêtre du navigateur entassé:

viewport-chrome-squish

Regardons maintenant l'apparence de la page sur un smartphone ( dans ce cas iOS Safari sur un iPhone 4):

viewport-iphone-incorrect

La première chose que tu vas remarquer est le titre rouge; très révélateur du fait que nous ne voyons pas le design étroit que nous avons attendu. Nous voyons la version diminuée.

iOS Safari suppose que la page a la largeur de 980px, et lui met tout en zoom arrière pour caser tout ensemble dans les 320px disponibles (iPhone 4). Le contenu est encore moins lisible, sauf si tu zoomes.

Pourquoi?

Comme on dit, présume il ouvre la fenêtre à tout les flops, mais c'est précisément ce que les navigateurs mobiles doivent faire, s'il n'en soit précisé autrement. Quand tu ouvres une page web dans un navigateur mobile, celui présume que tu la regardes en largeur classique desktop, et que tu veux la voir toute entiere, pas seulement le coin supérieur gauche. Donc le navigateur mettra la taille du viewport à 980px (sur iOS Safari), en pressant tout dans son petit écran.

La balise Viewport Meta

Entrée en scène la balise Viewport Meta, introduite par Apple, adoptée et développée par des autres.

Elle ressemble à ceci:

Dans le content="" tu peux entrer une longue liste des valeurs séparées par des virgules, mais nous allons nous concentrer sur les fundamentaux pour l'instant.

Pour example, si ton design mobile a été expressément conçu pour 320px, tu peux préciser la largeur avec viewport width:

Pour les designs flexibles, il sera plus pratique de regler la largeur du viewport pour le périphérique mobile en question, afin que la largeur de la mise en scène correspond à la largeur de l'écran du périphérique:

Pour être sûr et certain que ta mise en scène sera affichée comme tu as voulu, tu peux aussi contrôler le niveau de zoom. Ceci pour example:

... assurera que en ouvrent la page, ton design sera affiché correctement à l'échelle 1:1. Les zooms seront pas applicables. Tu pourrais aller encore plus loin et empêcher tout changement de zoom par l'utilisateur:

Note: Avant de appliquer la propriété maximum-scale, considère si tu voudrais vraiment empêcher les utilisateurs de zoomer. Pourraient-ils tout bien lire?

Utiliser la balise Viewport Meta incorrectement peut empêcher les utilisateurs malvoyantes d'acceder ton site web

Tout Ensemble

Ces propriétés nous donnent une bonne réglage par défaut pour travailler avec :

Voyons comment elles affectent notre example.

viewport-iphone-correct

Comme tu le vois, tout reste à l'échelle correcte. Le texte passe à la ligne au lieu de se reduire, et notre aide visuel (le titre rouge) est disparu.

Mais ...!

Merci à Jason pour avoir signalé รงa dans les commentaires. En mettent la largeur de ton mise en scène égale à la largeur d'écran du périphérique, tu vas rencontrer des problèmes quand le portable est en mode paysage. Jetions un coup d'œil sur le demo dans un iPhone 4 en mode paysage:

Ruiné
Ruiné.

Le navigateur se sent obligé de zoomer, pour correspondre à la largeur de la page.

Afin de contourner le problème, nous pourrions, comme Jason remarque, utiliser JavaScript pour choisir conditionnellement quels attributs de la balise meta à utiliser, mais le plus simple est d'ignorer le width entièrement. Juste par configuration de initial-scale on en déduit la largeur. Voici comment noutre nouveau demo simplifie fonctionnera en mode paysage:

Beaucoup mieux
Beaucoup mieux .

Pas le standard que tu cherches

La balise meta viewport était la solution créé par Apple. Elle etait vite adoptée par des autre plateformes, mais elle n'était jamais proposée par le W3C. Microsoft a mis au jour ce fait, quand ils ont décidé que IE10 vas ignorer le Viewport Metatag dans certaines circonstances. Au lieu de cela, ils ont préféré d'utiliser CSS Device Adaptation, sur laquelle le W3C s'appuie .

Bref, les propriétés viewport similaires sont réglées avec le CSS plutôt que HTML, en utilisant la régle @viewport.

Ou bien, selon notre nouvelle approche de ne pas préciser la largeur du périphérique, nous pourrions mettre le suivant:

Comme c'est un projet en cours, le IE10 nécessite la version préfixée de la proposition:

C'est une solution bien plus élégante que la balise meta, mais encore loin d'être complètement supportée. Mets-la dans ton CSS maintenant, pour assurer que ton design responsive fonctionne en IE10 "snap mode", et garde un œil sur son développement future. C'est ce vers quoi le contrôle du viewport se dirige.

Tu peux en lire plus sur le sujet dans l'article de Tim Kadlec IE10 Snap Mode and Responsive Design.

Conclusion

Le responsive web design n'est pas seulement pour les gens qui aiment regarder leur navigateurs s'agrandir et diminuer, il s'agit de s'occuper de tous les périphériques mobiles, écrans et résolutions possibles! Lance la balise Viewport Meta dans le <head>, et la règle @viewport dans ton CSS quand tu fais les mise en scènes flexibles et le tour est joué.

Pour en savoir plus

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.