L’autre jour j’ai eu à réaliser un site qui devait être compatible Ipad. Tout ce passait bien jusqu’au moment où j’ai rajoutée une grande image de fond – l’Ipad ne tolère pas que des blocs dépasse de son champ de vision (vous ne verrez jamais la barre de défilement horizontale !). Vu que mon image de fond à une dimension de 1 500px * 2 600px, elle dépassais largement de la résolution de l’Ipad (qui est pour mémoire de 1 024px * 768px).
Après maintes recherche, je suis tombé sur le blog de Stéphane HULARD, Todd’s WeBlog qui donne plusieurs astuces :
- Un grand div centré sur la page avec taille fixe et image de fond
- Une image de fond sur le body
- Une image de fond sur l’élément principal de mon site
- Une balise image de taille fixe et centrée
Aucune de ces techniques n’a fonctionné. J’ai donc effectué plusieurs recherches et j’ai réussi à trouver la solution!
Il faut donc :
- Soit s’arranger pour découper son image de fond et l’assembler sans qu’elle ne sorte du cadre
- Soit utiliser une feuille de style spécifique intégrant une image de fond adaptée (comme la résolution de l’écran est fixe, il est facile de créer une image de la bonne taille). Il n’existe pas de directive en HTML permettant de détecter l’IPad, il faut donc se baser sur la taille d’écran.
- Soit utiliser une directive Webkit permettant de spécifier la taille de l’image de fond
body{ -webkit-background-size: 2000px 1400px; }
J’ai préféré utiliser la troisième technique qui fonctionne très bien! En tout cas dans mon cas c’était celle qui était la plus rapide et la plus adaptée…
Tout comme Stéphane, j’ai utilisé la dernière technique, seulement en indiquant « -webkit- » cela prenait également en compte les navigateurs Safari et Chrome sur Mac ou PC… J’ai donc spécifiée cette règle seulement pour Ipad grâce aux médias queries :
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px){
body.custom-background {
background-size: 1800px auto;
}
}