• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Responsives CSS funktioniert nicht unter Android

  • Ersteller Ersteller Sempervivum
  • Erstellt am Erstellt am
S

Sempervivum

Guest
Hallo,
ich habe heute begonnen, meine China-Seite zu modernisieren und will sie dabei auch gleich responsiv machen. Folgendes Problem kann ich nicht lösen: Ich setze mit diesem Javascript das CSS:
Code:
$("img").each(function () {
s = $(this).attr("src");
if (s.indexOf("buttonup") == -1 &&
s.indexOf("buttonleft") == -1 &&
s.indexOf("buttonright") == -1) {
$(this).css({ maxWidth: $(this).width() + "px",
width: "80%",
width: "calc(100% - 105px)",
height: "auto"
});
}
})
Funktioniert soweit, allerdings nicht auf meinem Android-Smartphone. (Dieses kennt offenbar kein calc, aber der Fallback mit width:80% sollte funktionieren.)
Folgende Inline-Notation funktioniert jedoch unter Android:
HTML:
style="width: 70%; width: calc(100% - 105px); max-width: 766px; height: auto; border: 2px solid black; vertical-align:middle"
wie man hier sieht:
http://www.ulrichbangert.de/china/musikgruppe.php
Die Seite im Zusammenhang:
http://www.ulrichbangert.de/china/index_load.html

Leider bin ich mit den Diagnosemöglichkeiten unter Android nicht so vertraut und bitte um Hilfe.

Viele Grüße - Ulrich
 
Es kommt drauf an welches Smartphone Du genau hast. Viele haben auch noch ältere Versionen die bei der Unterstützung moderner CSS-Eigenschaften natürlich Abweichungen aufweisen könnten. Simulieren und debuggen kann man verschiedene Handys auf Android-Basis z.B. mit Google Chrome selbst in dessen Entwicklertools.
 
Es ist ein Samsung Ace3. Der Browser, der bei Samsung Standard ist. Es ist ja so, dass es mit Inline-Notation funktioniert, aber nicht mit Javascript. Wenn es nicht funktioniert, muss ich dann doch wieder zu Javascript zurück gehen.
 
Ich hab auch ein Samsung, aber S4, und garantiert eine andere Version des Browsers als Du ;)
 
Kannst Du mal probieren, ob es bei dir funktioniert? Man sieht es sofort, wenn es nicht funktioniert, haben die Bilder im Querformat volle Größe und ragen über den Bildschirmrand hinaus. Es soll ja nicht nur auf meinem funktionieren, aber ich habe nur dieses und kann es nur darauf testen.
 
Sieht bei mir völlig OK aus. Und Testen kannst Du es wie gesagt mit Chrome aufm Desktop.
 
Danke! Hm, dann muss es daran liegen, dass mein Handy nicht aktuell ist. Dann muss ich mich entscheiden, ob ich auf die Zukunft setze und es so lasse oder auf JS zurück gehe, um auch ältere Modelle zu unterstützen.
 
Zurück
Oben