Hi zusammen,
da die mobilen Zugriffe doch immer weiter steigen wollte ich mich heute mal wieder damit beschäftigen. Doch, was soll ich sagen, das ist die Hölle und ich verstehe da nicht wirklich viel.
Hat sich von euch damit schon mal einer beschäftigt und kennt sich damit aus?
Bei mir treten da sehr viele Fragen auf und stetig kommen neue hinzu. Alleine schon der Sinn / die Verwendung der Media-Queries macht mich kirre.
Z.B.
<style>
@media screen and (orientation: portrait) { .blablub {} }
@media screen and (min-device-width : 321px) and (max-device-width : 800px) {
body{background-color:red;}
.p1:before { content:" - quer - "; }
}
@media screen and (max-device-width : 320px) {
body{background-color:green;}
.p1:before { content:" - hoch - "; }
}
</style>
Das funktioniert soweit. Der Hintergrund wechselt seine Farbe, wenn man das Smartphone dreht. Doch warum funktioniert das nur, wenn die Anweisung "@media screen and (orientation: portrait) { .blablub {} }" da ist, obwohl die eigentlich keinen Sinn hat, überflüssig ist und auch nichts tut? Ohne die Zeile wechselt er aber nur den Hintergrunde, wenn man die Seite lädt, also Rot bei quer und Grün bei hochkant. Ändert man dann die Ausrichtung, dann bleibt der Inhalt gleich. Ist diese Zeile vorhanden, dann passt sich das Layout immer an, auch ohne neu zu laden... Das verstehe ich nicht.
Auch so Sachen wie Ausblenden von Bereichen. Was ist eigentlich, wenn ich bei hochkanter Darstellung die rechte Sidebar auf display:none setze? Gibt das Probleme mit Google? Ist ja schließlich versteckter Content, aber eben nur auf dem Smartphone und nur hochkant.
Oder so Dinge wie, woher das Gerät, das CSS eigentlich weiß, was da für ein Gerät gerade verwendet wird. Ich meine, mein SE Xperia hat eine Auflösung, die ist fast genauso wie mein TFT. Nur ist die Darstellung auf dem Smartphone halt so klein, dass man da nichts mehr lesen kann. Da hätte ich also gerne die Schrift etwas größer. Nur wie erkennt man nun, dass das ein Smartphone ist und wann ein TFT?
Beispiel:
TFT: 1680x1050px
SE Xperia (Portrait): 1294x1973px
oder, wann man xxx-device-width und wann man xxx-width verwendet.
Oder Formulare, bei denen so eine Kalenderbox aufgeht, über die man ein Datum auswählen kann. Das habe ich auf der Seite, nur auf dem Smartphone geht das Popup auf und die "Tastatur" vom Android. Das ist eine Katastrophe, da man da keines von beiden verwenden kann - überschneidet sich und verdeckt sich gegenseitig. Zudem ist die "Tastatur" unbrauchbar, da ich per Popup ein bestimmtes Format vorgebe, das bei der händischen Eingabe fehlt.
Oder oder oder.
Herrje, Fragen über Fragen. Und wie erkennt man die ganzen anderen Geräte? Ich kann ja schlecht alle Auflösungen auswendig wissen von allen Modellen auf dem Markt - oder doch?
Hm, ich merke schon jetzt wieder beim Tippen - ich verstehe nur Bahnhof.