Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Module ›

Parallax Bild funktioniert nicht bei iPad & iPhone

Eingetragen von makd (20)
am 02.11.2015 - 09:09 Uhr in
  • Module
  • Drupal 7.x oder neuer

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

‹ Less CSS Preprocessor 7.x-2.6 - Fehlermeldung nach Update Parallax Bild funktioniert nicht bei iPad & iPhone ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Hi, ich denke, das ist Geräte

Eingetragen von Hyp1 (1461)
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

https://awri.ch
Ich habe eine Schweizer Tastatur und daher kein scharfes ß ;-)

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ok

Eingetragen von makd (20)
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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hi, probier es mal mit dem

Eingetragen von Hyp1 (1461)
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

https://awri.ch
Ich habe eine Schweizer Tastatur und daher kein scharfes ß ;-)

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hi, das Problem liegt bei dem

Eingetragen von it-stent (26)
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

www.it-stent.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hallo Piotr,danke für deine

Eingetragen von makd (20)
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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hallo Mathias, wie ich

Eingetragen von Hyp1 (1461)
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

https://awri.ch
Ich habe eine Schweizer Tastatur und daher kein scharfes ß ;-)

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hallo Matthias, ich kann

Eingetragen von it-stent (26)
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

www.it-stent.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hallo nochmal,@Piotr: ich

Eingetragen von Hyp1 (1461)
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

Zitat:

background-attachment: scroll;

nichts ändern.

MfG

Robert

PS:

https://awri.ch
Ich habe eine Schweizer Tastatur und daher kein scharfes ß ;-)

  • Anmelden oder Registrieren um Kommentare zu schreiben

Es ist geschafft

Eingetragen von makd (20)
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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • View mit verschiedenartigen Informationen
  • user ausgabe in der html.twig Datei
  • [gelöst]Hilfsprogramme
  • Probleme beim Versand von Mails via Drupal 9
  • [gelöst] Drupal 9: Wie kommt der Inhalt eines selbst erstellten Feldes in page-title.html.twig
  • Daten werden bei Sortierung mehrfach ausgegeben
  • [gelöst] Sichtbarkeit von Seiten über Rollen steuern
  • [gelöst] Menüpunkte deaktivieren sich automatisch
  • Kartenansicht, Position des Users und Nodes anzeigen
  • Theme suggestion wird nicht verwendet
  • [gelöst]Pflichtfeld vom User deaktivieren lassen
  • Konto löschen, wie? (Drupalorg/Drupalcenter)
Weiter

Neue Kommentare

  • Vielen Dank!
    vor 2 Stunden 3 Minuten
  • html.twig Datei die verschiedenen Blöck
    vor 2 Stunden 25 Minuten
  • Wenn ich das richtig sehe,
    vor 2 Stunden 34 Minuten
  • Ich arbeite schon lange mit
    vor 10 Stunden 47 Minuten
  • Na dann haste ja 24x7 Stunden
    vor 22 Stunden 59 Minuten
  • es sieht so aus als ob es ein
    vor 1 Tag 48 Minuten
  • Da es auch mit neuer Drupal
    vor 1 Tag 1 Stunde
  • Sorry für die späte
    vor 1 Tag 3 Stunden
  • Hilfsprogramm
    vor 1 Tag 8 Stunden
  • Regina, ganz herzlichen Dank
    vor 1 Tag 9 Stunden

Statistik

Beiträge im Forum: 246123
Registrierte User: 18885

Neue User:

  • Stine_64
  • uniquename
  • xapizm

» Alle User anzeigen

User nach Punkten sortiert:
wla9019
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3917
ronald3832
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 5 Gäste online.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association