cssFrage: Element bei mobilen Geräten ausblenden

Hallo,

ich bin gerade dabei ein Design für mobile Endgeräten zu gestalten. Ich habe in dem Design ein Menü welches links ein kleines Icon und rechts daneben einen beschreibenen Text für den jeweiligen Menüpunkt hat. Ich möchte nun, falls das aktuelle Gerät ein Smartphone ist (zB Display-Breite kleiner als 320px), den beschreibenen Text ausblenden lassen.
Also in etwa so:

  
wenn bildschirmbreite kleiner 321px dann:  
#menu li span{  
 display: none  
}  

Da ich nunmal in css keine "wenn-dann"-bedingungen realisieren kann, frage ich mich wie man so etwas tun kann.

Kann mir jemand helfen?

LG

  1. Kann mir jemand helfen?

    Media Queries können dir hier helfen - aber bedenke bitte, dass du hier nicht nur auf die Pixel-Dimensionen gehen solltest, denn das kann böse ins Auge gehen.

    Viele Mobilgeräte haben Viewport-Auflösungen, die jene von Desktop-Geräten weit übertreffen.

    Entscheidend ist hier oft nicht die Pixel-Dimension des Displays selbst.

    1. @@suit:

      nuqneH

      aber bedenke bitte, dass du hier nicht nur auf die Pixel-Dimensionen gehen solltest, denn das kann böse ins Auge gehen.

      Inwiefern?

      Viele Mobilgeräte haben Viewport-Auflösungen, die jene von Desktop-Geräten weit übertreffen.

      Ja, und?

      Entscheidend ist hier oft nicht die Pixel-Dimension des Displays selbst.

      Entscheidend ist hier, zwischen „Device-Pixeln“ und „CSS-Pixeln“ zu unterscheiden.

      Qapla'

      --
      Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
      1. Entscheidend ist hier, zwischen „Device-Pixeln“ und „CSS-Pixeln“ zu unterscheiden.

        Nicht nur, es kommt auch auf die Größe des virtuellen Viewport und den Skalierungsfaktor an.

        1. Hallo,

          Entscheidend ist hier, zwischen „Device-Pixeln“ und „CSS-Pixeln“ zu unterscheiden.

          Nicht nur, es kommt auch auf die Größe des virtuellen Viewport und den Skalierungsfaktor an.

          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.

          Grüße
          Siri

          1. 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/

            1. Hallo,

              wow, Du bist - wie ich das erhofft hatte - richtig tief in der Materie drin! Das sind wahnsinnig viele wertvolle Informationen.

              Meine Gedanken gehen dahin, dass ich grundsätzlich unterschiedlich Seiten für Smartpgones, Tablets und PCs ausgeben möchte, da es mir nicht nur um ein angepasstes Layout geht, ich möchte auch das unterschiedliche "Feeling" berücksichtigen. Ein Fingertouch ist halt anderst als ein Mausklick...

              Basis ist eine gemeinsame XML für den Inhalt, die Seiten werden über XSL-T zu HTML transformiert. Die Crux: Ich müsste eigentlich vorher wissen, was der User für eine Art von Endgerät hat. Je nachdem wird das passende XSL herangezogen, das wiederum passende JS fürs Handling ausliefert. Für Smartphones und Tablets könnte ich die Kombination aus Viewport und Mediaqueries benutzen, die Du beschreibst. Für PCs, Netbooks, Notebooks etc. gäbs eine zweite Gerätegruppe, mit der ich analog verfahren kann.

              Eine Abfrage des Browserheaders liefert hier ja nicht unbedingt eine eindeutige Information. Mir schwirrt so durch den Kopf, dass ich den Browserheader in Kombination mit Bildschirmgröße als Entscheidungskriterium heranziehe. Und zusätzlich gebe ich dem Anwender die Möglichkeit, manuell umzuschalten.

              Was denkst Du? Könnte man in der Richtung etwas erreichen?

              Grüße
              Siri

              1. @@Siri:

                nuqneH

                Meine Gedanken gehen dahin, dass ich grundsätzlich unterschiedlich Seiten für Smartpgones, Tablets und PCs ausgeben möchte

                Vielleicht kriegst du deine Gedanken da wieder weg. Warum das nicht die besten Gedanken sind, hab ich letzens erörtert.

                Qapla'

                --
                Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
                1. Hallo,

                  Vielleicht kriegst du deine Gedanken da wieder weg. Warum das nicht die besten Gedanken sind, hab ich letzens erörtert.

                  Ich hatte Dich schon verstanden (und mich im verlinkten Thread parallel zu Dir auch so ausgedrückt). Außerdem hab ich mich ja öfter bei derartigen Diskussionen eingeklinkt (Breakpoints für unterschiedliche Bildschirmgrößen etc.), ist alles angekommen und ich hab dazu gelernt.

                  Mir gehts jetzt darun, dass ich für unterschiedliche "Geräteklassen" nicht nur einen unterschiedlichen "Look" habe (der Weg scheint mir jetzt klar), sondern auch ein unterschiedliches "Feel". Aber dazu müsste ich die Geräteklasse identifizieren können. Und mit Mediaquerries und Viewport komme ich da nicht weiter.

                  Grüsse
                  Siri

              2. Was denkst Du? Könnte man in der Richtung etwas erreichen?

                Es ist - abgesehen von dem technischen Sauhaufen - ganz einfach. Ich schließe mich hier Gunnar an:

                Erstelle ein angepasstes Layout mit Media Queries - ob du das mit 2 oder 5 Layoutsprüngen machst und eine Feste Viewport-Angabe nutzt oder ob du dich für ein flexibles Layout mit einigen zwischenschritten entscheidest ist egal.

                Das "Feeling" für die "Mobilgeräte"[1] kannst du nachreichen, da dies ohnehin fast ausschließlich auf JavaScript basiert - und wer keine Touch-Unterstützung hat, hat sie halt nicht.

                [1] eigentlich sind hier Touch-Geräte gemeint, denn auch auf Desktop-Rechnern gibt es Touchscreens und Hybride werden auch immer mehr - z.B. das Asus Transformer oder Ubuntu für Android.

                Du kannst also nicht davon ausgehen, dass ein kleines Display für Touchbedienung gedacht ist - du musst damit bei jedem Gerät rechnen.

                1. Hallo,

                  Das "Feeling" für die "Mobilgeräte"[1] kannst du nachreichen, da dies ohnehin fast ausschließlich auf JavaScript basiert - und wer keine Touch-Unterstützung hat, hat sie halt nicht.

                  [1] eigentlich sind hier Touch-Geräte gemeint, denn auch auf Desktop-Rechnern gibt es Touchscreens und Hybride werden auch immer mehr - z.B. das Asus Transformer oder Ubuntu für Android.

                  Ja, es sind Touchgeräte gemeint, so kann man das definieren! Und ich denke, dass mit Touchgeräten eine anderes Navigationsverhalten sinnvoll ist was aber einhergeht mit einem dazu passenden Seitenaufbau bzw. Strukturierung der Seite. Deshalb ist das Look&Feel nicht so einfach zu trennen und auch die Bildschirmgröße spielt da eine Rolle. Und um keinen "technischen Sauhaufen" entstehen zu lassen suche ich ein tragfähiges Konzept, das mir trennt, was getrennt gehört.

                  Grüsse
                  Siri

                  1. Und um keinen "technischen Sauhaufen" entstehen zu lassen suche ich ein tragfähiges Konzept, das mir trennt, was getrennt gehört.

                    So ein Konzept erstellt sich nicht so einfach - das letzte das ich in die Richtung gemacht (nicht allein) habe, hat eine obere 4-stellige Summe gekostet und war eine Woche arbeit für 2 bis 3 Leute :)

                    Das hängt doch alles sehr vom Anwendungsfall und der Zielgruppe ab

                    1. Und um keinen "technischen Sauhaufen" entstehen zu lassen suche ich ein tragfähiges Konzept, das mir trennt, was getrennt gehört.

                      So ein Konzept erstellt sich nicht so einfach - das letzte das ich in die Richtung gemacht (nicht allein) habe, hat eine obere 4-stellige Summe gekostet und war eine Woche arbeit für 2 bis 3 Leute :)

                      Ich erstelle das nicht für einen Kunden, insofern ist es einfach die Zeit, die ich investiere. Es ist die Herausforderung, die in erster Linie reizt, da gibts viel zu lernen und zu tüfteln. Und in einer Umbruchphase wie jetzt kann das Wissen eines (nicht so fernen) Tages "Gold" wert sein. Ansonsten hab ich mich halt einfach nur weiter gebildet und spannende Diskussionen gehabt. 15MT sind da mehr als in Ordnung :-)

                      Das hängt doch alles sehr vom Anwendungsfall und der Zielgruppe ab

                      Wie immer ;-)

                    2. ...mit der Prüfung auf Tocuchstart-Events mit JavaScript auf der richtigen Spur (in Kombination mit der Bildschirmgröße)? Das könnte ich bei einer Abfrage per Ajax und Erstaufruf checken und mit einer ziemlich großen Wahrscheinlichkeit die Gerätegruppe bestimmen und dann wieder per Mediaquery das passende Layout beisteuern.

                      Grüsse
                      Siri

                      1. ...mit der Prüfung auf Tocuchstart-Events mit JavaScript auf der richtigen Spur (in Kombination mit der Bildschirmgröße)?

                        Die Kombination mit der Bildschirmgröße kannst du dir sparen - es gibt Geräte mit winzigen Viewports ohne Touch-Steuerung und geräte mit riesigen Touchdisplays.

                        1. Die Kombination mit der Bildschirmgröße kannst du dir sparen - es gibt Geräte mit winzigen Viewports ohne Touch-Steuerung und geräte mit riesigen Touchdisplays.

                          Allen kann man es auch nicht recht machen (Du meinst sowas wie den Blackberry?). Ich hab an eine Kombinationswahrscheinlichkeit gedacht, weil ich nicht sicher bin, ob der TouchEvent eine reine Eigenschaft des Browseres ist oder er nur möglich ist, wenn das Gerät das auch zulässt. Oder andes gesagt, ob der Browser sich die Info("ich  bin ein Touchgerät")beim OS holt oder einfach bereitstellt.

                          Grüsse
                          Siri

                          1. Oder andes gesagt, ob der Browser sich die Info("ich  bin ein Touchgerät")beim OS holt oder einfach bereitstellt.

                            Entweder der Browser unterstützt die touch-Events (touchstart, touchend, touchmove) oder er tut es nicht. Woher er diese holt und ob er noch oben eigene Gesten draufstetzt ist prinzipiell egal.

                            Dass du für jeden Browser und jedes OS die spezifischen touch-Gesten auch noch im Look&Feel des OS bedienst halte ich für ziemlich unmöglich.

                            1. Dass du für jeden Browser und jedes OS die spezifischen touch-Gesten auch noch im Look&Feel des OS bedienst halte ich für ziemlich unmöglich.

                              Danke für die Infos und Deine Einschätzung!

                              Grüße
                              Siri

                            2. @@suit:

                              nuqneH

                              Dass du für jeden Browser und jedes OS die spezifischen touch-Gesten auch noch im Look&Feel des OS bedienst halte ich für ziemlich unmöglich.

                              Aral Balkan auch.

                              Qapla'

                              --
                              Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
  2. @@cssFrage:

    nuqneH

    Ich möchte nun, falls das aktuelle Gerät ein Smartphone ist (zB Display-Breite kleiner als 320px), den beschreibenen Text ausblenden lassen.

    Wie lang ist der beschreibenen Text? Gerade für Mobilgeräte ist die zu übertragende Datenmenge möglichst klein zu halten; also nichts zu übertragen, was nicht angezeigt wird. Vielleicht könnte man ja den Text erst für Geräte mit größerem Bildschirm per JavaScript/AJAX nachladen?

    Wenn es sich um wenige Bytes handelt, mag man den Aufwand sicher nicht betreiben. Dann würde ich ihn auch im Markup haben und per Media-Query ausblenden.

    Qapla'

    --
    Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)