Stylesheet für mobile Geräte mit großem Display (z. B. Galaxy)

[Pet]

Hallo SELFHTML-Forum!

Ich arbeite an einer Website und würde Besuchern, die mit einem mobilen Gerät unterwegs sind, gerne mit einem einem eigenen Stylesheet eine optimerte Website liefern. (Größere Schrift, weniger Bilder ect.)

Mit der Angabe media only screen and (max-device-width: 480px) erreiche ich auch schon einige Geräte (z. B. das iPhone), andere wie z. B. das Galaxy S nicht. Dieses hat eine Auflösung von 1000x1413, die Schrift wird aber immer noch viel zu klein dargestellt. (Und das, obwohl ich ohnehin sehr große Schriften verwende.) An dieser Stelle frage ich mich, wie ich - in der Praxis - mobile Geräte dieser Art ansprechen kann.

Bei den iPhones kommt erschwerend hinzu, dass dort sowohl das screen-Stylesheet als auch das mobile-Stylesheet angezeigt werden und ich im mobile-Stylesheet einen großen Teil der Angaben aus dem screen-Stylesheet widerrufen muss, was nicht nur das Stylesheet aufbläht, sondern auch nicht wirklich zufriedenstellend funktioniert.

Auf die CSS-Anweisung handheld reagiert das Galaxy S auch nicht, weshalb mich interessiert, wie ihr generell mit mobilen Geräten und insbesondere mit Smartphones, die ein Display mit hoher Auflösung haben, umgeht.

Grüße
Pet

[LX]

Hi, Pet!

@media screen and (-webkit-min-device-pixel-ratio: 2) ist bspw. für das iPhone 4 gut. Vielleicht hilft es ja auch beim Galaxy (ggf. mit geänderten Werten).

Ich gehe normalerweise so damit um, dass ich versuche, für Browser ohne Support für Media-Queries vernünftige Normalwerte zu finden und diese dann, sofern Media-Queries unterstützt werden, entsprechend anpasse. Bei Bedarf schreibe ich auch mal per JS bestimmte Klassen ins Body-Tag, wenn mir das etwas bringt. Allerdings verwende ich insgesamt nur ein Stylesheet.

Gruß, LX

[suit]

z. B. das Galaxy S nicht. Dieses hat eine Auflösung von 1000x1413 [...]

ich bin mir ziemlich sicher, dass das I9000 nativ 480 x 800 hat und auch das S2 hat dieselbe Auflösung.

[LX]

Moment, vielleicht meint er die Seitenauflösung (window.innerWidth). In diesem Fall empfehlen sich die webkit-spezifischen viewport-Meta-Tags, um die Seitengrößen und -zoom-Einstellungen festzulegen.

Gruß, LX

[suit]

Moment, vielleicht meint er die Seitenauflösung (window.innerWidth). In diesem Fall empfehlen sich die webkit-spezifischen viewport-Meta-Tags, um die Seitengrößen und -zoom-Einstellungen festzulegen.

Und die ist größer (und vor allem sehr unrund) als die native Auflösung? wohlkaum.

[LX]

entschuldige, ich meinte natürlich document.body.offsetWidth. Trotzdem wäre das meta-Tag keine dumme Idee.

Gruß, LX