Element bei mobilen Geräten ausblenden

[suit]

Und was bedeutet das für die Praxis? Was wird abgefragt und wo? Viewport? Mediaqueries? Und wo und wann? Wäre super, wenn Du da ein wenig aus dem Nähkästchen plauderst.

Die harte Wahrheit ist, dass es nicht so einfach ist, wie Gunnar das gerne hätte - in einem idealen Umfeld mit idealen Bedingungen kommt man mit Media Queries aus - das Problem ist die Viewport-Angabe in form einer Meta-Information und die ist durch CSS allein nicht zu korrigieren (das kann nur Opera, weil die Leute dort etwas weiter denken als die Apple-Entwickler).

Allgemeines Dazu
http://davidbcalhoun.com/2010/viewport-metatag
http://developer.android.com/guide/webapps/targeting.html

Das nächste Problem ist, dass die Unterscheidung zwischen Viewport-Breite und Höhe sehr unterschiedlich ausfällt.

Während bei den meisten Browser Breite und Höhe mit der Orientierungsänderung ihre Plätze tauschen, liefert ein iOS-Gerät als Breite immer die Breite, auch wenn das Gerät im landscape-Betrieb läuft.

Jetzt hat man mehrere Möglichkeiten: man setzt den Viewport auf die Device-Größe, muss aber damit leben, dass die Orientierungswechsel auf iOS-Geräten nicht mehr funktionieren, weil nach einem Orentierungswechsel nicht mehr skaliert wird.

Dasselbe gilt für Geräte die nach einem Orientierungswechsel andere CSS-Regeln anwenden würden, weil der Viewport "zu breit" wird, das ist z.B. in Robot der Fall.

Eine andere Möglichkeit ist, den Viewport zu ignorieren - hier wird per default in den vielen Geräten/Browser ein virtueller Viewport von 980px gewählt - auf älteren Android-Geräten aber nicht.

http://tripleodeon.com/wp-content/uploads/2011/12/table.html

Um das Problem auf möglichst allen marktrelevanten Geräten zu lösen und noch nicht irre viel Ressourcen zu verschwenden reichen reine CSS-Mittel nicht aus. Man muss also mit JavaScript nachhelfen.

Man kann z.B: die zur Verfügung stehende Breite bestimmen (mit Media Queries) und dann das Viewport-Element entsprechend abändern. Das funktioniert unter iOS, aber führt - wenn man nicht aufpasst - bei Robot unter Android 2.x zu einer Endlosschleife.

Ich hab' vor einiger Zeit mal einen Testcase zusammengezimmert

Hier wird einfach per Media Queries das body-Element auf eine bestimmte Breite gesetzt und per JavaScript ausgelesen und dann ins Viewport-Element geschrieben.

Das funktioniert ansich recht gut, wenn man den virtuellen Viewport nutzen will und nur Layout-Sprünge für Mobilgeräte möchte, hat aber den Nachteil, dass es sehr unflexibel wird, wenn man nicht nur zwei Layoutvarianten hat sondern mehr.

Eine bessere Lösung ist, hier nicht mit festen Breitenangaben zu arbeiten sondern mit Schlüsselwörtern, die per Media Queries als generierter Inhalt per CSS gesetzt werden:

http://adactio.com/journal/5429/
http://www.springload.co.nz/love-the-web/responsive-javascript/