web-dev-qa-db-fra.com

Un moyen de corriger la mise à l'échelle de l'arrière-plan dans Safari sur iPad?

J'ai un site Web qui utilise une énorme image d'arrière-plan (2000x1500) dans un conteneur div (100% x 100%).

Lorsque j'ouvre ce site sur Safari sur un iPad, il est réduit (~ 40%) dans une proportion différente de celle du contenu (~ 80%).

J'ai déplacé l'arrière-plan vers un img-tag dans un div avec 100% largeur et 100% hauteur et un paramètre de débordement "masqué". Exactement la même chose arrive.

Existe-t-il un paramètre CSS pouvant aider Safari à réduire les images d’arrière-plan dans les mêmes proportions que le contenu?

cssipadsafaribackground
25
favo

Vous devez absolument créer une feuille de style distincte pour l'iPad . Vous pouvez utiliser ce qui suit pour le faire:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

Sur ce lien, vous trouverez des informations sur l'orientation de votre site Web sur l'iPad et sur la façon de le gérer.

Mon conseil serait de créer une feuille de style distincte (fichier css) pour la version iPad de votre site, quoi que vous fassiez, vous devez simplement le créer et ajouter une balise de lien comme celle présentée ci-dessus.

Si vous avez un fond d’image de 2000x1500px pour la version iPad, vous pouvez le réduire pour l’adapter à l’iPad, si c’est la seule chose qui vous pose problème. Je dirais que vous devriez réduire la taille de l'image à 1024 pixels et la déclarer dans la feuille de style distincte pour l'iPad et vous verrez le résultat final.

Faites-moi savoir comment ça se passe.

BTW, vous devriez également lire cet article: http://www.inspiredm.com/2010/02/09/ipad-design/

19
UXdesigner

Ajouter ceci a fonctionné pour moi quand j'avais une image de fond sur la toile de fond ...

body{ -webkit-background-size: 2000px 1400px;}

Évidemment, il faut remplacer les dimensions par la taille correcte pour l'image.

31
Noel Saw

Il semble que ce problème ne se produise sur l'iPad que si une image d'arrière-plan est associée à la balise <body>. Si vous placez l’image d’arrière-plan dans une division qui le contient, le problème peut être résolu - c’est un excellent moyen de contourner le problème si vous n’avez pas besoin que votre image d’arrière-plan soit "corrigée", car les techniques permettant de corriger l’arrière-plan doivent être IE oblige à utiliser la balise <body> pour les images.

Vous pouvez voir la différence entre ces deux sites, le premier utilise la balise <body> pour le positionnement (en raison du positionnement fixe sur l'image d'arrière-plan) et le second utilise un div contenant:

http://www.mricsi.comhttp://www.collinshirsch.com

J'espère que cela pourra aider!

modifier - ce n’est pas tout à fait exact - il semble que ce n’est le cas que de temps en temps, et la raison pour laquelle pourquoi n’est pas claire.

2
sticky IT

J'ai un 5400x556 comme image de fond (défilement) dans un div. En tant que .jpg, il est considérablement réduit, tandis que .png, c'est bien. Le seul problème est que le fichier .png est de 5 Mo. Grr.

Bon appel sur les feuilles de style séparées cependant.

bonne chance

owen

1
Owen Denham

Vous pouvez utiliser la solution de @UXdesigner pour créer une feuille de style séparée pour iPad. Mais vous pouvez utiliser une seule déclaration dans votre feuille de style actuelle:

@media only screen and (max-device-width: 1024px){
  .yourClassname{
    max-width: 500px;
  }
}

et bien sûr pour les plus petits appareils comme les téléphones, vous pouvez utiliser:

@media only screen and (max-device-width: 480px){
  .yourClassname{
    max-width: 100px;
  }
}

Notez que ces suggestions ne fonctionnent que dans CSS3 (les derniers appareils acceptent tous cela)

0
arnoudhgz

J'utilise:

 body {min-width:2000px; min-height:1500px }
0
Tadeu Luis