18 juin Astuces html css

Problème d’affichage du background sur ipad et autres tablettes

J’ai rencontré récemment un problème d’affichage du background sur un IPAD.
L’image de background ne s’étirait pas à 100% de la fenêtre du navigateur sur la tablette tactile, alors que celui-ci aurait dû prendre la taille de l’élément parent (dans mon cas le sélecteur html)
Pour pallier à ce problème d’affichage il suffit de mettre un min-width sur l’élément concerné.
Par exemple, pour mon cas précis :

html{
min-width:1224px;
}

A vous d’ajuster le nombre de pixel suivant votre site internet. Vous pouvez bien-sûr également cibler ce style css spécifiquement au support Ipad grâce aux media queries

Autre exemple :

@media screen and (max-width: XXXpx) {
html{
min-width:1224px;
}
}

Pour rappel, un écran Retina a une résolution de 2048 x 1 536 pixels, tout de même !

A bientôt pour de nouvelles astuces.

Tags:

Laisser un commentaire

Accessibility by WAH