Par défaut, les navigateurs mobiles affichent les pages dans des fenêtres d’affichage (viewport) beaucoup plus grandes que la taille réelle des écrans des téléphones mobiles.
Il est nécessaire d’adapter cette fenêtre d’affichage aux dimensions des périphériques mobiles pour un meilleur confort visuel aux utilisateurs.
La balise viewport est justement là pour ça.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser la balise viewport pour le web mobile
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours dédié à jQuery Mobile, on continue avec les bases, au prochain cours, on va rentrer dans le vif du sujet de jQuery Mobile, ça c’est encore un petit cours pour vous apprendre les bases du développement sur mobile, donc vous allez découvrir la balise meta viewport.
La balise meta viewport
Qu’est-ce que c’est cette balise ? Et à quoi elle sert ?
Par défaut il faut savoir que les navigateurs Mobiles affichent … les pages ont des fenêtres d’affichages appelées viewport, beaucoup plus grande que la taille réelle des écrans de téléphones mobiles. La valeur par défaut d’une largeur varie d’un navigateur à l’autre, vous avez les différentes valeurs en fonction de si c’est un iPhone, un iPad, Androïd, opéra mobile, ou Internet Explorer. Et par défaut cette fenêtre d’affichage virtuelle n’est pas égale à la dimension réelle de l’écran et la consultation de la page peut être difficile pour l’utilisateur.
Il est nécessaire d’adapter cette fenêtre d’affichage aux dimensions des périphériques mobiles, pour un meilleur confort visuel de l’utilisateur déjà, et la balise viewport, elle sert à ça, elle permet d’adapter la fenêtre d’affichage aux dimensions du périphérique mobile, smartphone, tablette etc. width c’est la largeur du viewport en pixel, la largeur de l’image donc avec la valeur device width, la page est redimensionnée sur toute la largeur de l’écran, je vous ai mis un exemple de code source pour voir comment ça s’écrit.
height c’est la hauteur de l’affichage, justement et avec la valeur device height, la page est redimensionnée sur toute la hauteur de l’écran, c’est-à-dire, votre page si elle est plus grande que votre écran par défaut, elle va être redimensionnée à la taille de l’écran de l’utilisateur, du périphérique de l’utilisateur.
Je vous ai mis des exemples de code source malheureusement, avec les moyens techniques que j’ai, j’étais sur Firefox de bureau, et vous ne pourrez pas voir l’affichage ce que ça donne, par contre je peux vous montrer le code source, ça il n’y a pas de problème.
User-scalable ça définit si l’utilisateur peut zoomer ou dé zoomer sur la page, je vous conseille de laisser à l’utilisateur la possibilité de zoomer ou de dézoomer, car s’il n’arrive pas à lire votre texte, et en plus que vous bloquez le zoom, il ne va pas revenir sur votre site.
Vous avez initial-scale ça vous permet de définir la position du zoom de départ, je vous ai mis un exemple de code source, par défaut, la valeur est 1, mais si vous détectez que le périphérique mobile de votre utilisateur a un écran vraiment petit, vous pouvez, par défaut dans votre code directement le zoomer. Vous avez la minimum-scale c’est le dézoom minimum possible, maximum scale c’est le zoom maximum possible que vous laissez à l’utilisateur. Toujours en utilisant la balise meta qui s’appelle viewport.
Vous pouvez même définir avec target-densitydpi, le choix de la résolution en dpi de l’affichage pour l’utilisateur, soit des images dpi c’est la résolution native du périphérique, c’est ce que je vous conseille par défaut de toujours utiliser la résolution native du périphérique de votre internaute, ou alors en basse résolution dpi, résolution plutôt moyenne, medium-dpi, et haute résolution avec high-dpi ou alors vous pouvez définir un nombre entre 70 et 400 dpi.
Cet attribut n’est pas repris par tous les navigateurs mobiles, à de voir, moi je vous conseille de ne pas toucher cette option-là, utilisez la résolution par défaut du périphérique de votre internaute.
Je vous ai mis un exemple, évidemment, de code source, sachez qu’il est possible de combiner tous ces paramètres dans la balise viewport, c’est ce que je vous montre dans le code source.
Exemple d’application
Ici vous avez la balise viewport, la taille, la largeur, on prend la largeur du périphérique, le zoom par défaut à 0,5 on dé zoom à 0,5 par défaut l’affichage de la page, et la largeur, c’est la largeur par défaut pardon, largeur elle est là, je n’ai pas mis hauteur mais vous pouvez mettre heigh égale device-height comme cela, bien évidemment, height égale device-height pour la hauteur par défaut du périphérique mobile, ça c’est pour le zoom et la densité, la résolution de l’affichage de l’écran donc c’est la résolution par défaut du périphérique. C’est aussi simple que ça.
Votre plan d’actions !
C’est un exemple, un cours vraiment très cours justement, un exemple un peu cours, c’est la dernière base que vous avez à connaître, dans le prochain cours on va attaquer dans le vif du sujer avec jQuery Mobile, si vous avez des questions, posez-les directement sous cette vidéo, retrouvez également le code source sous ce cours vidéo.
Si vous voulez aller plus loin, au-dessus de cette vidéo, il y a une image, soit à la fin de cette vidéo il y a un lien qui va s’afficher, vous cliquez sur ce lien et vous allez avoir la possibilité d’accéder à plusieurs cours professionnels pour apprendre à utiliser le Framework jQuery et ses extensions, jQuery UI et jQuery Mobile, Framework Dojo sur le bout des doigts, à la fin de cette vidéo vous cliquez sur le lien, vous allez voir cette possibilité là, et en attendant, je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple avec viewport
Et voici l’exemple de code source avec la balise viewport.
Téléchargement du code source Exemple d'application web avec la balise viewport
