Parallax Bild funktioniert nicht bei iPad & iPhone
Eingetragen von makd (20)am 02.11.2015 - 09:09 Uhr in
Hallo ersteinmal,
ich hätte gerne ein Problem ;-))
Ich verwende in einem Theme ein Parallax Modul an drei stellen. Die Darstellung funktioniert perfekt PC mit XP bis 7 Pro mit Chrome, FF und IE. Auch auf Android und Windows Phone und Tablet geht es. Auf meinem MacBook Pro geht es mit dem Safari auch – nur nicht auf den iPad und iPhone Geräten nicht. Weder mit dem Chrome noch mit dem Safari.
Die Bilder werden immer verzerrt (viel zu groß) angezeigt.
Hat jemand eine Idee dazu?
... ach ja ... der Link dazu! www.justfifty.de
- Anmelden oder Registrieren um Kommentare zu schreiben
Hi, ich denke, das ist Geräte
am 02.11.2015 - 11:24 Uhr
Hi,
ich denke, das ist Geräte spezifisch.
Auf Retina Displays hast Du einen anderen Aspect Ratio.
Schau mal hier:https://css-tricks.com/forums/topic/why-might-this-image-be-distorted-on-only-certain-browsers/
Gruss
Robert
Ok
am 02.11.2015 - 17:46 Uhr
Hallo Robert,
habe versucht die Stelle in der CSS zu identifizieren - das ist mir aber nicht gelungen. Ich habe keine Größenangaben gefunden die ich hätte verändern können.
#parallax_1 {background:url(../images/Baum_entspannung.jpg) no-repeat fixed center center; background-size:cover;}
.block_parallax_caption_1 {height:300px; overflow:hidden; position:relative;}
Ich kenne mich mit "background-size:cover" überhaupt nicht aus.
Hast Du eine weitere Idee wie ich das Problem angehen kann? Bist Du ein CSS-Guru? Könntest Du mir helfen?
LG Matthias
Hi, probier es mal mit dem
am 02.11.2015 - 18:09 Uhr
Hi,
probier es mal mit dem folgenden Meta-Tag
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">Du musst das CSS finden welches das Retina oder den Aspect Ratio betrifft.
Schau Dir im Fall ein HTML Beispiel an welches auf den Geräten gut läuft.
Vergiss nicht den Cache zu löschen, wenn Du Änderungen am Theme machst.
Gruss
Robert
Hi, das Problem liegt bei dem
am 03.11.2015 - 00:30 Uhr
Hi,
das Problem liegt bei dem "background-attachment". In iOS wirst Du ohne ordentlich zu tricksen Dein "Parallax", soweit ich weiss, nicht hinkriegen. In Deinem Theme gibt es sogar CSS-Befehle (style.css Zeile 2492 bis 2494), die in iOS die Hintergrundbilder mitscrollen lassen - sie werden aber durch inline style überschrieben.
Das "fixed" in inline styles vom #parallax_1, #parallax_2, #parallax_3 solltest Du mit "scroll" ersetzen.
Zum Beispiel:
.touch_device #parallax_1,.touch_device #parallax_2,
.touch_device #parallax_3 {
background-attachment: scroll !important;
}
Dadurch bleibt dein Hintergrund nicht fixiert, aber das Bild sieht wenigstens ansprechend aus.
Viele Grüße
Piotr
Hallo Piotr,danke für deine
am 07.11.2015 - 16:47 Uhr
Hallo Piotr,
danke für deine Nachricht. Ich habe "fixed" gegen "scroll" getauscht und
nach der CSS-Zeile 2494 noch die oben stehende CSS Zeilen von Dir eingefügt. Leider ist das Ergebnis unverändert.
Mir würde es ja schon ausreichen, wenn das einfach nur die Bilder da wären die sich anpassen. (also unter iOS meine ich).
Die müssten gar nicht mitscrollen - nur halt eben nicht nicht verzerrt sein.
Hast du vielleicht noch einen Tipp für mich?
Viele Grüße
Matthias
Hallo Mathias, wie ich
am 08.11.2015 - 10:34 Uhr
Hallo Mathias,
wie ich bereits sagte, es ist die Pixeldichte und, nicht fixierte Höhe oder Breite.
Grundsätzlich musst Du für Retina auch Bilder mit einer höheren Pixeldichte/Aspect Ratio für
die Retina Displays laden.
Du benötigst also 2 Bilder, eins mit normaler und eins mit höherer Auflösung(Retina).
Dann kannst Du folgendes machen:
Im MediaQuery fragst ab ob es ein Display mit hoher Auflösung ist und lädst dann entsprechend
das Bild mit der höheren Auflösung.
Oder:
Da Retina Displays die doppelte Auflösung haben, müsste es auch so funktionieren:
Mach deine Images einfach doppelt so gross 200x200px und zeige Sie in HTML(img) einfach 100X100px an.
Das sollte auch auf nicht Retina Devices funktioneren aber Achtung, die Bilder benötigen dann auch die doppelte Bandbreite.
Media Query:
Schau mal hier(Das 4. Beispiel von oben): https://css-tricks.com/snippets/css/retina-display-media-query/
Das könnte Dir auch noch helfen:
Retina.js:
http://imulus.github.io/retinajs/
Grüsse
Robert
Hallo Matthias, ich kann
am 08.11.2015 - 15:16 Uhr
Hallo Matthias,
ich kann leider Deine Änderungen nicht finden. Entweder hast Du sie rückgängig gemacht (falls nicht - zeige bitte wo Du die css-Zeilen eingefügt hast), oder den cache nicht gelöscht. Das mit "background-attachment: scroll" müsste funktionieren und hat auch mit "fixierte Höhe oder Breite" bzw. "retina" nichts zu tun.
Mit hochauflösenden Displays wie "retina" hat man eigentlich nur das "Problem", dass die Bilder nicht scharf dargestellt werden und deshalb ersetzt man sie. Und 200x200px zu 100x100px ist nicht doppelt sondern vierfach so gross (die Bandbreite auch).
Liebe Grüße
Piotr
Hallo nochmal,@Piotr: ich
am 08.11.2015 - 17:25 Uhr
Hallo nochmal,
@Piotr: ich habe mir das css der Seite nicht genau angesehen.
Ich gebe Dir auch Recht, dass das Image nur unscharf dergestellt wird,
wenn Höhe und Breite skaliert werden.
Doch bei Adaptiven Designs wird meist nur eine Seite des Bildes skaliert, entweder Breite oder
Höhe sind fix.
Egal wie skaliert wird, um es richtig zu machen, auch wegen der Bandbreite, benötigt, er 2 Images eins für normale und eins für hochauflösende Displays.
Daran kann auch
background-attachment: scroll;
nichts ändern.
MfG
Robert
PS:
Es ist geschafft
am 08.11.2015 - 20:06 Uhr
Ich habe gestern wohl nicht richtig die CSS Datei gespeichert. Habe es heute noch einmal ünerprüft und mit den Änderrungen von Piotr eingefügt
und - Ta ta ... es geht! Vielen Dank an Dich - und vor allem an Piotr.
Wo kommst Du her? Bin ein Fan von persönlichem Kontakt. Ich lebe in Marburg / Hessen
Jetzt kann ich beruhigt die Seite meiner Frau online bringen.
Schönen Rest-Sonntag
Matthias