CSS für mobile geräte

[dobardan]

  
<style type="text/css"/>  
@media handheld {  
body { background-color:#000000;  
      }  
#table {  
width:300px;  
font-family:Verdana, Arial, Helvetica, sans-serif;  
font-size:16px;  
}  
#localcopy {  
width:300px;  
font-family:Verdana, Arial, Helvetica, sans-serif;  
font-size:13px;  
}  
.localcopy_1 {  
color:#cccccc;  
font-size:20px;  
font-family:Verdana, Arial, Helvetica, sans-serif;  
}  
#header {  
width:246px;  
height:87px;  
color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; background-color:#cccccc;  
}  
.bild {  
width:246px;  
height:87px;  
}  
#copy_main{  
width:254px;  
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; color:#ffffff; margin-left:20px; background-color:#000000;  
}  
#right_col {  
width:60px;  
}  
}  
@media screen {  
body { background-color:#000000;  
      }  
#table {  
width:598px;  
font-family:Verdana, Arial, Helvetica, sans-serif;  
font-size:10px;  
}  
#localcopy {  
width:560px;  
font-family:Verdana, Arial, Helvetica, sans-serif;  
font-size:9px;  
}  
.localcopy_1 {  
color:#cccccc;  
font-size:9px;  
font-family:Verdana, Arial, Helvetica, sans-serif;  
}  
#header {  
width:560px;  
height:198px;  
color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; background-color:#cccccc;  
}  
.bild {  
width:560px;  
height:198px;  
}  
#copy_main{  
width:380px;  
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#ffffff; margin-left:20px; background-color:#000000;  
}  
#right_col {  
width:184px;  
}  
.blid {  
width:560px;  
height:198px;  
}  
}  
</style>

Hi,
ich habe die oben geschriebene css coding in my html template eingebaut.
aber auf dem Handy nimmt diese formatierung nicht.
Z.B.
Das Bild soll bei normal browser 560 x 198 aber auf dem handy soll 284 x 87. Das funktioniert nicht.

Vielen Dank
Mvg

[LX]

Ich mutmaße jetzt mal, dass screen auch beim Handy zutrifft und daher der letzte Selektor ebenfalls zutrifft.

Endweder stattest Du den ersten Selektor mit höherer Spezifität aus oder änderst die Reihenfolge von screen und mobile.

Ein weiteres Problem könnte darin bestehen, dass der Browser Deines Handys das mobile-CSS ignoriert - das kannst Du jedoch leicht testen.

Gruß, LX

[dobardan]

Ich mutmaße jetzt mal, dass screen auch beim Handy zutrifft und daher der letzte Selektor ebenfalls zutrifft.

Endweder stattest Du den ersten Selektor mit höherer Spezifität aus oder änderst die Reihenfolge von screen und mobile.

Ein weiteres Problem könnte darin bestehen, dass der Browser Deines Handys das mobile-CSS ignoriert - das kannst Du jedoch leicht testen.

Gruß, LX

Hi LX,

vielen Dank für die rasche Hilfe. Ist media=handheld ist nicht für Mobile Geräte? Ich habe auch die Rheinfolge geändert aber es funktioniret nicht.

Danke
mvg

[Gunnar Bittersmann]

@@dobardan:

nuqneH

Ist media=handheld ist nicht für Mobile Geräte?

Ja. Aber was gehen die Hersteller mobiler Webclients die Specs des W3C an?

Siehe A List Apart: Return of the Mobile Stylesheet.

Qapla'