2010-10-07 7 views
8

Nous avons un design de page qui fonctionne très bien dans tous les navigateurs de PC que j'ai essayés, mais qui devient étrange quand on le regarde avec un iPhone ou un iPod Touch.Le rendu de l'image de fond CSS différemment sur l'iPhone

Le problème est quelque chose à voir avec une image de fond centrée thats très grand:

#content_container 
{ 

background-image:url('content-background.jpg'); 
background-position:top center; 
background-repeat:no-repeat; 
width:1020px; 
height:auto; 
} 

L'image content-background.jpg est très grand (3000 pixels) et est conçue pour être « révélé » comme le DIV est en pousse en raison du contenu.

Vous devrez regarder la page et complète CSS à comprendre, alors je l'ai tout le reste dépouillé de la conception et recréée le problème avec cet exemple:

http://files.codeulike.com/static/cssexample/example.htm
(exemple en jusqu'à 1 fichier html, 1 fichier css et 3 images)

Vous verrez que dans IE8, Firefox, Chrome vous obtiendrez une belle boîte verte. Mais dans un navigateur iOS, la longue image de fond mince est redimensionnée et tout devient étrange.

(J'utilise un iPod touch 2ème génération mais je suppose que le même problème se produira dans d'autres iPhones/touches iPod).

Toute aide grandement appréciée!

Répondre

16

Imaginé: L'iPhone a une limite de mégapixels pour les Jpeg, après quoi il réduit le Jpeg.

Il y a un très bon blog à ce sujet sur defusion.org.uk: http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/

La limite après laquelle Jpeg se rétrécis semble être autour de 2 mégapixels. Its a documenté la limite des ressources iOS et est décrite ici:

Apple - Creating Compatible Web Content - Know iOS Resource Limits

Le maximum décodé taille de l'image pour JPEG est de 32 mégapixels à l'aide sous-échantillonnage.

images JPEG peuvent être jusqu'à 32 mégapixels en raison de sous-échantillonnage, ce qui permet aux images JPEG à décoder à une taille qui a un seizième du nombre de pixels. Les images JPEG de taille supérieure à 2 mégapixels sont sous-échantillonnées, c'est-à-dire décodées en taille réduite . Sous-échantillonnage JPEG permet l'utilisateur d'afficher des images à partir des derniers appareils photo numériques .

.. que je considère dire que Jpeg de moins de 2 mégapixels sont affichés normalement, Jpeg entre 2 et 32 ​​mégapixels sont affichées par sous-échantillonnage (diminution) et Jpeg plus de 32 millions de pixels vraisemblablement ne peut pas être affiché du tout. Changer mon site pour utiliser une image de fond de moins de 2 mégapixels a résolu le problème.

+0

Enregistré mon cul! C'est exactement ce que j'avais besoin de savoir. Je pensais qu'il y avait quelque chose de mal avec mon CSS et le piratait pendant une heure ou deux quand j'ai trouvé ce post. Merci! En fait, je ne suis pas sûr de la limite réelle, je pense que c'est une limite de taille de fichier, pas de mégapixels ou de largeur ou de hauteur. – Brian

+0

Pour une rétraction rapide de l'image mobile dans le cloud, vous pouvez utiliser http://tinysrc.net afin que le mauvais navigateur - et le réseau - n'aient pas à faire le dur travail. –

+0

Corriger environ> 32 mégapixels ne montre pas du tout - a pris une heure de débogage, mais c'était la solution. iOS Safari charge l'image si elle est pointée directement dessus, mais lorsque l'image est un arrière-plan, la console de débogage dans OSX Safari affiche un symbole d'image brisée sans informations utiles. – user208769

0

Pas tout à fait vrai, j'ai un fond 1640x1200 (sub 2Mpix) et l'arrière-plan se rétrécit ici ...: S

+1

Pas besoin de recoder le code. il suffit d'utiliser les requêtes media CSS3 (que le safari mobile reconnaît) et de créer une image de fond plus petite pour iphone: @media screen et (max-device-width: 640px) {/ * sytles spéciaux pour iPhone/appareils similaires */#affected_div (s) {background: url (images/smaller_bg_img_filename.jpg) en haut au centre no-repeat! important; }} – Brian

0

je Safaris CSS3 plusieurs images d'arrière-plan pour contourner ce problème, vient de faire 4 images 500px de hauteur et les positionner au-dessus de l'autre

0

Je réalise que ce poste est de deux ans que j'écris, mais J'ai essayé quelque chose qui fonctionnait, peut-être pas la meilleure façon d'y aller mais cela a résolu mon problème.

La première étape consistait à enregistrer mon image d'arrière-plan en tant que .png qui a complètement résolu le problème ... sauf une image de fond de 1200px x 12000px, le fichier .png était un monstre. J'ai donc ouvert le fichier .png dans Photoshop et l'ai enregistré optimisé pour le Web et les appareils en tant que fichier .jpg et téléchargé ce fichier et cela a fonctionné comme un charme sur l'iPhone et tous les 5 grands navigateurs.

Espérons que ça aide!

0

Si vous avez gardé

background-attachment: fixed; 

dans le fichier CSS de bureau, rappelez-vous alors à changer pour

background-attachment: scroll; 

dans le fichier CSS mobile. Si cela n'est pas fait, cela produira un effet inattendu.