Das if20 Forum

Forum » Sonstiges » if20 mobil

Mobile Geräte mit CSS identifizieren


Autor Nachricht
Verfasst am: 22. 03. 2011 [17:09]
Supernaut
Supernaut
Dabei seit: 07.03.2011
Beiträge: 64
 Hallo.

Mit YAML lassen sich ja flexible Templates erstellen. Mit dem entsprechenden CSS können die Bildschirmauflösungen verschiedener Endgeräte berücksichtigt werden.

Die Theorie

Mit CSS3 haben die Media-Queries Einzug gehalten. Über Abfragen in CSS-Dateien lassen sich "Weichen" für bestimmte Gerätetypen bauen.

Für einen Einstieg in die Thematik hier der Link zum W3C.

http://www.w3.org/TR/css3-mediaqueries/

Somit gibt es eine Möglichkeit, gerätespezifischen Code in CSS zu schreiben.

Die Praxis

Nicht alle Geräte "sagen" die Wahrheit, mobile schon gar nicht. Als unsere Weichen partout nicht funktionieren wollten, haben wir eine Testreihe gestartet. In die Root-CSS haben wir unterhalb aller @import-Anweisungen folgenden Code eingetragen:

PHP
body {background:white;}
 
@media only screen and (max-device-width: 800px) 
{
body {background:grey;}
}
 
@media only screen and (max-device-width: 480px) 
{
body {background:red;}
}
 
@media only screen and (max-device-width: 320px) 
{
body {background:blue;}
}


Dann haben wir die Webseite mit unterschiedlichen Endgeräten aufgerufen. Je nach Hintergrundfarbe konnten wir sagen, wie sich welches Gerät identifiziert hatte.

Hier eine kleine Auswahl:

Android 2.2 = 800px
iPhone3 = 800px
iPad1 = 800px
(windows mobile 6.1 versteht CSS nur bedingt und CSS3 schon gar nicht)

Keines der mobilen Geräte hat die "Wahrheit gesagt". Das Android-2.2-Gerät hatte eine Auflösung von 480x800, das iPhone von 320x480 und das iPad von 1024x768 (bei geringerer Pixelauflösung als die andren Geräte). Diese Werte wurden im Portrait- und im Landscape-Modus übermittelt.

Wer eine bessere Methode kennt oder weitere Geräte-Werte beisteuern kann, möge es hier tun.





Viele Grüße

Supernaut
Profil