Bug width 100% dans webkit mobile

Voici un article qui va être assez court mais qui je l’espère vous aidera à résoudre un bug un peu spécial sous Safari mobile (Ipad, Pod Touch et Iphone) et plus généralement webkit mobile. Dans un des contrats web que j’ai fais récemment j’ai été confronté à un problème de CSS apparemment référencé sous Safari IOS. Safari IOS est basé sur le moteur de rendu de pages Web open source Webkit. Webkit est utilisé par de nombreux navigateur web mobile comme Android, Nokia, Blackberry, Iphone, Ipad … 

Explication du bug CSS

Dans le header de ce site j’ai un css qui permet à une div avec un width de 100% d’avoir un background  positionné à 50% sur l’axe des x comme suit : 

#branding {
width:100%;
height:392px;
background-position: 50% 50%;
background-repeat: no-repeat;
}

Dans tous les navigateurs (Testé dans Chrome, Firefox, Safari, IE 8,9) ce CSS fonctionne parfaitement et permet d’avoir une image en background qui s’affichera toujours à 100% de la taille du navigateur. Il faut bien évidemment une image assez grande (1600px minimum) pour que l’effet soit réussit. MAIS sous Safari mobile, seule une partie du background s’affiche. Cela provient du viewport (partie affiché à l’écran) qui est différent sur IOS. Voici un lien à lire pour comprendre le viewport.

Résolution du bug en utilisant viewport

J’ai donc réussit à résoudre ce bug en ajoutant une meta qui permet de fixer la largeur du viewport désiré dans webkit mobile. En fait pour simplifier j’ai utiliser la largeur maximale du content de mon site. Cela donne dans le head de votre HTML : 

<meta name = "viewport" content = "width = 590">

Ce paramètre va permettre à Webkit de savoir la partie que vous souhaitez afficher à l’écran et va donc exécuter un « zoom » sur la largeur (width) que vous avez définie.

Conclusion 

Je pense que je vais intégrer cela dans tous mes développements car cela permet de toute façon de fixer la façon dont vous souhaitez que Webkit affiche vos pages sur un navigateur basé sur webkit (la plupart maintenant) en plus de résoudre certains bug CSS.