Wir haben ein Seitendesign, das in jedem PC-Browser funktioniert, den ich ausprobiert habe, aber bei der Betrachtung mit einem iPhone oder iPod Touch ist es seltsam.
Das Problem hat etwas mit einem zentrierten Hintergrund zu tun, der sehr groß ist:
%Vor% Das Bild content-background.jpg ist sehr groß (3000 Pixel) und wurde entwickelt, um "aufgedeckt" zu werden, da das DIV, auf dem es sich befindet, aufgrund des Inhalts wächst.
Sie müssen sich die Seite und das vollständige CSS ansehen, um es zu verstehen, also habe ich alles andere aus dem Design genommen und das Problem mit diesem Beispiel neu erzeugt:
Ссылка
(Beispiel bestehend aus 1 HTML-Datei, 1 CSS-Datei und 3 Bildern)
Sie werden sehen, dass Sie in IE8, Firefox, Chrome eine schöne grüne Box bekommen. Aber in einem iOS-Browser wird das lange dünne Hintergrundbild neu skaliert und alles wird merkwürdig.
(Ich benutze einen iPod Touch der zweiten Generation, aber ich nehme an, das gleiche Problem wird bei anderen iPhones / iPod Touches passieren).
Jede Hilfe sehr geschätzt!
Ich habe es herausgefunden: Das iPhone hat eine Megapixel-Grenze für Jpegs, nach der es das JPEG verkleinert.
Es gibt einen sehr guten Blog-Beitrag dazu auf defusion.org.uk: Ссылка
Die Grenze, nach der Jpegs geschrumpft werden, scheint ungefähr 2 Megapixel zu sein. Es ist ein dokumentiertes iOS-Ressourcenlimit und wird hier beschrieben:
Apple - Erstellen kompatibler Webinhalte - Kenntnis der iOS-Ressourcenbeschränkungen
Die maximale dekodierte Bildgröße für JPEG verwendet 32 Megapixel Subsampling.
JPEG-Bilder können bis zu 32 Megapixel haben aufgrund der Unterabtastung, die JPEG ermöglicht Bilder zu einer Größe dekodieren, die hat ein Sechzehntel die Anzahl der Pixel. JPEG-Bilder größer als 2 Megapixel werden unterabgetastet - also zu a dekodiert reduzierte Größe. JPEG-Subsampling ermöglicht der Benutzer, um Bilder von der neueste Digitalkameras.
.. was bedeutet, dass Jpegs unter 2 Megapixel normal angezeigt werden, Jpegs zwischen 2 und 32 Megapixel werden durch Subsampling (Schrumpfen) angezeigt, und Jpegs über 32 Megapixel können vermutlich überhaupt nicht angezeigt werden.
>Durch das Ändern meiner Website für ein Hintergrundbild, das unter 2 Megapixel lag, wurde das Problem behoben.
Ich weiß, dass dieser Beitrag zwei Jahre alt ist, während ich dies schreibe, aber ich habe versucht, etwas zu tun, das funktioniert, vielleicht nicht der beste Weg, aber es hat mein Problem gelöst.
Der erste Schritt bestand darin, mein Hintergrundbild als .png zu speichern, wodurch das Problem vollständig behoben wurde. Abgesehen davon, dass es ein 1200px x 12000px Hintergrundbild war, war die .png-Datei ein Monster.
Also, ich habe die .png-Datei in Photoshop geöffnet und für das Internet und die Geräte optimiert als .jpg gespeichert und diese Datei hochgeladen, und es funktionierte wie ein Zauber auf dem iPhone und allen großen 5 Browsern.
Hoffe das hilft!
Wenn Sie
behalten haben %Vor%in der Desktop-CSS-Datei, dann denken Sie daran, es in
zu ändern %Vor%in der mobilen CSS-Datei. Wenn dies nicht gemacht wird, wird es einen unerwarteten Effekt zeigen.
Tags und Links css iphone background-image