Supposons que votre site utilise une media-query pour adapter votre site aux smartphones. Logiquement, on peut supposer que vous décidiez d'utiliser le méta viewport.
Supposons maintenant que dans ce cas, vous spécifiez une taille pour la largeur pour les smartphones, par exemple :
<meta name="viewport"
content="width=640px,
height=device-height" />
Faites attention, l'iPad utilise le méta viewport, et spécifier une largeur à laquelle s'adapter peut totalement faire planter certains types de positionnement sur l'iPad !
Ce dernier a une résolution de 1024 pixels de largeur, mais il prend en compte le viewport, si ce dernier est fixé à une taille plus basse, certains positionnements peuvent totalement foirer.
Typiquement, left:50%; et margin-left:-450px; pour centrer un contenu de 900 pixels de large, cela ne marche pas si le viewport fait 640 pixels.
Idéalement, laissez le viewport s'adapter aux dimensions de l'agent utilisateur :
<meta
name="viewport"
content="width=device-width,
height=device-height" />
C'était "la peau de banane en intégration web" du jour.
