Responsive design : le Meta Viewport l’indispensable

Sur l’article vu précédemment nous avons aborder les Medias query, mais on ne peut affirmer faire du web design responsive sans combinaison Medias query et Meta Viewport.

Effectivement sans Meta Viewport, le changement de la taille de la fenêtre du navigateur donnait un résultat satisfaisant car on pouvait avoir une mise en page flexible, mais dés qu’on teste sur un smartphone, la situation se gâte car on voyais la version miniature du design en plein écran.

Le problème

Affichage de la page sur Chrome Desktop:

viewport-chrome-correct

Maintenant l’apparence de la page sur iOS Safari mobile ( smartphone iPhone 4)

iphone4

iOS Safari mobile met tout en zoom arrière pour caser tout ensemble dans les 320px disponibles (iPhone 4) vue que Safari mobile suppose que par défaut la largeur de la page est de 980px, c’est pas un bug mais c’est précisément ce que les navigateurs mobiles doivent faire, sauf si on le spécifie autrement.

La solution

La solution se trouve dans le titre de notre article > le viewport.

Si on veut faire du responsive design, l’utilisation de la Viewport Meta dans le <head> est primordiale.

Dans sa forme basique, elle s’écrira comme ci-dessous

La balise Viewport Meta

Dans notre cas, il est indispensable d’attribuer la largeur du viewport à la largeur de l’écran du périphérique donc on aura :

Pour contrôler le niveau de zoom on l’initialise à 1 c’est-à-dire pas de zoom par défaut.

Pourrais aller encore plus loin, on pourra empêcher tout changement de zoom par l’utilisateur:

Après concaténations on aura les valeurs suivantes :

Compatibilité et exception

Malgré le fait que Windows phone détient au alentour de 8% du part du marché des OS mobiles, on ne pourra négliger les utilisateurs d’IE10.

Tout en sachant que Viewport était une solution crée par Apple et n’était jamais proposée par le W3C . Microsoft dans sa version 10 d’internet explorer a décider de l’ignorer, mais préfère utiliser CSS Device Adaptation, sur laquelle le W3C s’appuie .

Bref, les propriétés viewport seront intégrés dans le CSS plutôt que mis directement dans le HTML, en utilisant la régle @viewport.

Vu que c’est un projet pas encore finalisé cela nécessite la version préfixée d’internet explorer:

Répondre