[Rocreex]

Hallo liebe Community,

ich wollte gerade für eine Internetseite ein CSS explizit für Smartphones erstellen. Nun dachte ich, ich kann ja dann mit den Media Queries das Screen-Stylesheet für alle Geräte ab einer bestimmten Auflösung einbinden und das Mobile-Stylesheet für alle Geräte darunter.

Das Problem dabei: IE<=8 ignoriert das Stylesheet dann komplett, sobald es so ein Media Query drin hat.

Dann habe ich das Mediaquery vom Screen-Stylesheet entfernt und das Mobile-Stylesheet darunter eingebunden, musste dann aber natürlich alle vorher gesetzten Eigenschaften, die ich nicht wollte dort wieder überschreiben.
Das heißt aber wiederum wahrscheinlich, dass große Hintergrundbilder, die ich beim Mobile-Stylesheet eigentlich vermeiden wollte, trotzdem geladen werden(?)

Gibt es dafür eine elegante Lösung oder muss ich dann mit den IE-Conditionals arbeiten um die alten IE-Versionen mit dem Screen-Stylesheet zu versorgen?

Gruß
Rocreex

[SimonDerDude]

Die derzeit sinnvollste Lösung ist es, älteren Browsern (nicht nur IE) mittels JavaScript HTML5 Elemente als auch Medie Queries beizubringen.

Deine Suchbegriffe sind HTML5shiv und css3-mediaqueries.js
Beides wird sogar von Google gehostet.

[Rocreex]

Hm, alles klar. Die Alternative wäre dann mit PHP zu arbeiten, oder?

[Morgo]

Nein, das ist Alternativlos™

[Rocreex]

Ich bin mir nicht sicher, was du mir damit sagen willst.

Ich hab noch ein bisschen nach PHP Lösungen gesucht und dabei die Bibliothek "mobiledetect" gefunden, die wohl ganz zuverlässig erkennt, ob Smartphone, Tablet oder was anderes zugreift. Und ich hab mich jetzt entschlossen, die Bibliothek zu verwenden anstatt den Clients ein JS unterzuschieben, das im dümmsten Fall gar nicht läuft weil nicht aktiviert.

[pantonine]

[SimonDerDude]

Darüber hinaus tut es nichts zu deinem Problem.
Alte Browser kennen Media Queries nicht, da kannst du auch die Prozessortaktrate des Users abfangen wollen - es ändert so oder so nichts daran dass du das JavaScript brauchst.

Solche umständlichen Abfragen wollte man genau mit Media Queries verbessern. Weil Smartphones mittlerweile auch eine recht hohe Auflösung haben kannst du auch nicht einfach ein Stylesheet für Smartphones ausgeben. Alles was zählt ist der Viewport und deine Breakpoints.