Le doctype HTML 5 à utiliser pour les mobiles
Le doctype ou type de document est une instruction obligatoire au début des documents HTML 5.
Vous avez appris au début de cette partie, que HTML5 avait simplifié cette instruction pour se limiter à :
<!DOCTYPE html>Choisissez toujours le doctype adapté à utiliser dans votre site Web pour que celui-ci soit compatible avec les mobiles.
Pour les mobiles, vous allez compléter ce doctype. C’est ce que vous allez découvrir dans ce tuto.
Écrire le doctype pour un site mobile
Vous allez commencer avec le doctype XHTML pour mobile, celui que vous utilisiez peut-être :
<! DOCTYPE html PUBLIC "-// WAPFORUM// DTD XHTML Mobile 1.2// EN" "http:// www.openmobilealliance.org/ tech/ DTD/ xhtml-mobile12. dtd" >Sinon, le doctype HTML 5, celui que nous vous conseillions d’utiliser, est beaucoup plus simple et plus concis.
Le doctype HTML 5 permet d’afficher une page correcte sur un appareil mobile. L’avantage, c’est que cette page peut s’afficher également correctement sur un navigateur classique, comme les ordinateurs de bureau et les ordinateurs portables.
Une page HTML 5 sait s’adapter sans problème aux différents formats des appareils mobiles, aux différentes résolutions des écrans, qu’il y ait un écran plus petit comme les smartphones, ou un peu plus grand comme les tablettes.
Grâce à HTML 5, sans code spécifique pour l’un ou l’autre périphérique, vous allez obtenir un site cohérent et conforme quel que soit le périphérique.
Utilisez le doctype HTML 5, il est très simple à insérer dans une page. Il va vous permettre de créer des pages qui s’adaptent automatiquement en fonction de la taille des écrans des appareils mobiles.
Vous allez créer des mises en page avec des tailles beaucoup plus grandes et surtout utiliser tout l’espace disponible sur l’écran du périphérique.
Vous pourrez aussi créer une page normale en indiquant au navigateur de prendre la taille de l’écran que vous avez défini et non la valeur par défaut.
Vous allez ensuite définir dans une balise meta, en fonction de la taille de l’écran, la largeur de la page à utiliser. C’est vraiment très pratique cette nouvelle fonctionnalité HTML 5 !
La taille de la fenêtre d’affichage
Dans le header de votre page HTML5, vous définissez la balise meta name viewport :
< meta name =" viewport" content =" user-scalable = no, initial-scale = 1.0, maximum-scale = 1.0, width = device-width" />Différentes options sont possibles avec cette balise :
user-scalable=no: interdit le zoom par l’utilisateur, à vous de le définir ;initial-scale: affiche la page sans zoom, c’est la taille par défaut au chargement de la page, très pratique ;width=device-width: indique au navigateur la taille de la page à afficher.
Soit vous prenez la même taille que la taille de l’appareil, soit vous pouvez donner une valeur différente en pixel. C’est à vous de
voir en fonction du résultat que vous souhaitez obtenir sur le périphérique auquel le site est destiné.
Écrire le doctype pour un site mobile
Vous pouvez définir la fenêtre d’affichage dans la feuille de style CSS en utilisant la balise viewport.
height, c’est la même chose que width sauf que c’est pour la hauteur.
minimum-scale c’est le zoom minimum possible sur la page par l’utilisateur.
maximum-scale : le zoom maximum possible sur la page par l’utilisateur.
target-densityDpi : fonctionne exactement comme width et height mais définit la densité de l’écran.
Vous pouvez mettre une valeur réelle ou définir votre propre valeur ou encore device-dpi.
Cette dernière n’est plus supportée par Chrome et ne l’était déjà pas par d’autres, donc n’utilisez pas cet attribut.
Les valeurs par défaut de minimum-scale et maximum-scale sont respectivement 0.25 et 1.6 et la valeur initiale, initial-scale, doit se situer entre ces deux valeurs, c’est le zoom utilisé par défaut sur la page.
Conclusions
Nous vous conseillions d’utiliser le doctype HTML 5 sur vos pages, sur vos sites à destination des mobiles.
En plus du doctype, HTML5 vous permet d’écrire des pages Web qui s’adaptent automatiquement en fonction du périphérique de l’utilisateur.
Le gabarit que nous avons vu au début du livre est toujours valable pour les mobiles, tout comme les balises que nous avons vues pour la mise en page, les liens, les images, les formulaires, etc. !
