tag:forum.selfhtml.org,2005:/self Element bei mobilen Geräten ausblenden – SELFHTML-Forum 2012-08-02T12:49:13Z https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554485#m1554485 cssFrage 2012-07-29T18:19:52Z 2012-07-29T18:19:52Z Element bei mobilen Geräten ausblenden <p>Hallo,</p> <p>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.<br> Also in etwa so:</p> <pre><code class="block language-css"> <span class="token selector">wenn bildschirmbreite kleiner 321px dann: #menu li span</span><span class="token punctuation">{</span> display<span class="token punctuation">:</span> none <span class="token punctuation">}</span> </code></pre> <p>Da ich nunmal in css keine "wenn-dann"-bedingungen realisieren kann, frage ich mich wie man so etwas tun kann.</p> <p>Kann mir jemand helfen?</p> <p>LG</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554487#m1554487 suit spam.2012@rebell.at http://rebell.at/ 2012-07-29T18:48:07Z 2012-07-29T18:48:07Z Element bei mobilen Geräten ausblenden <blockquote> <p>Kann mir jemand helfen?</p> </blockquote> <p><a href="http://www.w3.org/TR/css3-mediaqueries/" rel="nofollow noopener noreferrer">Media Queries</a> 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.</p> <p>Viele Mobilgeräte haben Viewport-Auflösungen, die jene von Desktop-Geräten weit übertreffen.</p> <p>Entscheidend ist hier oft nicht die Pixel-Dimension des Displays selbst.</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554486#m1554486 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2012-07-29T19:01:29Z 2012-07-29T19:01:29Z Element bei mobilen Geräten ausblenden <p>@@cssFrage:</p> <p>nuqneH</p> <blockquote> <p>Ich möchte nun, falls das aktuelle Gerät ein Smartphone ist (zB Display-Breite kleiner als 320px), den beschreibenen Text ausblenden lassen.</p> </blockquote> <p>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?</p> <p>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.</p> <p>Qapla'</p> <div class="signature">-- <br> Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí) </div> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554488#m1554488 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2012-07-29T18:57:38Z 2012-07-29T18:57:38Z Element bei mobilen Geräten ausblenden <p>@@suit:</p> <p>nuqneH</p> <blockquote> <p>aber bedenke bitte, dass du hier nicht nur auf die Pixel-Dimensionen gehen solltest, denn das kann böse ins Auge gehen.</p> </blockquote> <p>Inwiefern?</p> <blockquote> <p>Viele Mobilgeräte haben Viewport-Auflösungen, die jene von Desktop-Geräten weit übertreffen.</p> </blockquote> <p><a href="http://forum.de.selfhtml.org/archiv/2012/6/t210070/#m1430896" rel="nofollow noopener noreferrer">Ja, und?</a></p> <blockquote> <p>Entscheidend ist hier oft nicht die Pixel-Dimension des Displays selbst.</p> </blockquote> <p>Entscheidend ist hier, zwischen „Device-Pixeln“ und „CSS-Pixeln“ zu unterscheiden.</p> <p>Qapla'</p> <div class="signature">-- <br> Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí) </div> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554489#m1554489 suit spam.2012@rebell.at http://rebell.at/ 2012-07-29T19:34:39Z 2012-07-29T19:34:39Z Element bei mobilen Geräten ausblenden <blockquote> <p>Entscheidend ist hier, zwischen „Device-Pixeln“ und „CSS-Pixeln“ zu unterscheiden.</p> </blockquote> <p>Nicht nur, es kommt auch auf die Größe des virtuellen Viewport und den Skalierungsfaktor an.</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554490#m1554490 Siri 2012-07-30T05:43:43Z 2012-07-30T05:43:43Z Element bei mobilen Geräten ausblenden <p>Hallo,</p> <blockquote> <blockquote> <p>Entscheidend ist hier, zwischen „Device-Pixeln“ und „CSS-Pixeln“ zu unterscheiden.</p> </blockquote> <p>Nicht nur, es kommt auch auf die Größe des virtuellen Viewport und den Skalierungsfaktor an.</p> </blockquote> <p>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.</p> <p>Grüße<br> Siri</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554491#m1554491 suit spam.2012@rebell.at http://rebell.at/ 2012-07-30T11:23:23Z 2012-07-30T11:23:23Z Element bei mobilen Geräten ausblenden <blockquote> <p>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.</p> </blockquote> <p>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).</p> <p>Allgemeines Dazu<br> <a href="http://davidbcalhoun.com/2010/viewport-metatag" rel="nofollow noopener noreferrer">http://davidbcalhoun.com/2010/viewport-metatag</a><br> <a href="http://developer.android.com/guide/webapps/targeting.html" rel="nofollow noopener noreferrer">http://developer.android.com/guide/webapps/targeting.html</a></p> <p>Das nächste Problem ist, dass die Unterscheidung zwischen Viewport-Breite und Höhe sehr unterschiedlich ausfällt.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p><a href="http://tripleodeon.com/wp-content/uploads/2011/12/table.html" rel="nofollow noopener noreferrer">http://tripleodeon.com/wp-content/uploads/2011/12/table.html</a></p> <p>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.</p> <p>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.</p> <p>Ich hab' vor einiger Zeit mal einen <a href="http://fiddle.jshell.net/yyGcG/show/" rel="nofollow noopener noreferrer">Testcase</a> zusammengezimmert</p> <p>Hier wird einfach per Media Queries das body-Element auf eine bestimmte Breite gesetzt und per JavaScript ausgelesen und dann ins Viewport-Element geschrieben.</p> <p>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.</p> <p>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:</p> <p><a href="http://adactio.com/journal/5429/" rel="nofollow noopener noreferrer">http://adactio.com/journal/5429/</a><br> <a href="http://www.springload.co.nz/love-the-web/responsive-javascript/" rel="nofollow noopener noreferrer">http://www.springload.co.nz/love-the-web/responsive-javascript/</a></p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554492#m1554492 Siri 2012-07-30T11:47:04Z 2012-07-30T11:47:04Z Element bei mobilen Geräten ausblenden <p>Hallo,</p> <p>wow, Du bist - wie ich das erhofft hatte - richtig tief in der Materie drin! Das sind wahnsinnig viele wertvolle Informationen.</p> <p>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...</p> <p>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.</p> <p>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.</p> <p>Was denkst Du? Könnte man in der Richtung etwas erreichen?</p> <p>Grüße<br> Siri</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554503#m1554503 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2012-07-30T13:04:32Z 2012-07-30T13:04:32Z Element bei mobilen Geräten ausblenden <p>@@Siri:</p> <p>nuqneH</p> <blockquote> <p>Meine Gedanken gehen dahin, dass ich grundsätzlich unterschiedlich Seiten für Smartpgones, Tablets und PCs ausgeben möchte</p> </blockquote> <p>Vielleicht kriegst du deine Gedanken da wieder weg. <a href="https://forum.selfhtml.org/?t=210501&m=1435000" rel="noopener noreferrer">Warum das nicht die besten Gedanken sind</a>, hab ich letzens erörtert.</p> <p>Qapla'</p> <div class="signature">-- <br> Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí) </div> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554493#m1554493 suit spam.2012@rebell.at http://rebell.at/ 2012-07-30T13:13:10Z 2012-07-30T13:13:10Z Element bei mobilen Geräten ausblenden <blockquote> <p>Was denkst Du? Könnte man in der Richtung etwas erreichen?</p> </blockquote> <p>Es ist - abgesehen von dem technischen Sauhaufen - ganz einfach. Ich <a href="https://forum.selfhtml.org/?t=210578&m=1435849" rel="noopener noreferrer">schließe mich hier Gunnar</a> an:</p> <p>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.</p> <p>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.</p> <p>[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.</p> <p>Du kannst also nicht davon ausgehen, dass ein kleines Display für Touchbedienung gedacht ist - du musst damit bei jedem Gerät rechnen.</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554494#m1554494 Siri 2012-07-30T13:41:25Z 2012-07-30T13:41:25Z Element bei mobilen Geräten ausblenden <p>Hallo,</p> <blockquote> <p>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.</p> <p>[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.</p> </blockquote> <p>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.</p> <p>Grüsse<br> Siri</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554495#m1554495 suit spam.2012@rebell.at http://rebell.at/ 2012-07-30T15:28:32Z 2012-07-30T15:28:32Z Element bei mobilen Geräten ausblenden <blockquote> <p>Und um keinen "technischen Sauhaufen" entstehen zu lassen suche ich ein tragfähiges Konzept, das mir trennt, was getrennt gehört.</p> </blockquote> <p>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 :)</p> <p>Das hängt doch alles sehr vom Anwendungsfall und der Zielgruppe ab</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554502#m1554502 Siri 2012-07-30T15:59:15Z 2012-07-30T15:59:15Z Element bei mobilen Geräten ausblenden <blockquote> <blockquote> <p>Und um keinen "technischen Sauhaufen" entstehen zu lassen suche ich ein tragfähiges Konzept, das mir trennt, was getrennt gehört.</p> </blockquote> <p>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 :)</p> </blockquote> <p>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 :-)</p> <blockquote> <p>Das hängt doch alles sehr vom Anwendungsfall und der Zielgruppe ab</p> </blockquote> <p>Wie immer ;-)</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554496#m1554496 Siri 2012-07-30T18:58:06Z 2012-07-30T18:58:06Z Bin ich... <p>...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.</p> <p>Grüsse<br> Siri</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554497#m1554497 suit spam.2012@rebell.at http://rebell.at/ 2012-07-30T22:28:16Z 2012-07-30T22:28:16Z Bin ich... <blockquote> <p>...mit der Prüfung auf Tocuchstart-Events mit JavaScript auf der richtigen Spur (in Kombination mit der Bildschirmgröße)?</p> </blockquote> <p>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.</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554498#m1554498 Siri 2012-07-31T05:24:23Z 2012-07-31T05:24:23Z Bin ich... <blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>Grüsse<br> Siri</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554499#m1554499 suit spam.2012@rebell.at http://rebell.at/ 2012-08-01T08:14:53Z 2012-08-01T08:14:53Z Bin ich... <blockquote> <p>Oder andes gesagt, ob der Browser sich die Info("ich  bin ein Touchgerät")beim OS holt oder einfach bereitstellt.</p> </blockquote> <p>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.</p> <p>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.</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554501#m1554501 Siri 2012-08-01T08:20:15Z 2012-08-01T08:20:15Z Bin ich... <blockquote> <p>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.</p> </blockquote> <p>Danke für die Infos und Deine Einschätzung!</p> <p>Grüße<br> Siri</p> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554500#m1554500 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de/ 2012-08-02T12:49:13Z 2012-08-02T12:49:13Z Bin ich... <p>@@suit:</p> <p>nuqneH</p> <blockquote> <p>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.</p> </blockquote> <p>Aral Balkan <a href="http://mobile.smashingmagazine.com/2012/06/18/mobile-considerations-in-user-experience-design-web-or-native/" rel="nofollow noopener noreferrer">auch</a>.</p> <p>Qapla'</p> <div class="signature">-- <br> Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí) </div> https://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554504#m1554504 Siri 2012-07-30T13:29:20Z 2012-07-30T13:29:20Z Element bei mobilen Geräten ausblenden <p>Hallo,</p> <blockquote> <p>Vielleicht kriegst du deine Gedanken da wieder weg. <a href="https://forum.selfhtml.org/?t=210501&m=1435000" rel="noopener noreferrer">Warum das nicht die besten Gedanken sind</a>, hab ich letzens erörtert.</p> </blockquote> <p>Ich hatte Dich schon verstanden (und mich im verlinkten Thread <a href="https://forum.selfhtml.org/?t=210501&m=1434994" rel="noopener noreferrer">parallel </a>zu Dir auch so ausgedrückt). Außerdem hab ich mich ja öfter bei derartigen Diskussionen eingeklinkt (<a href="https://forum.selfhtml.org/?t=210464&m=1434810" rel="noopener noreferrer">Breakpoints </a>für unterschiedliche Bildschirmgrößen etc.), ist alles angekommen und ich hab dazu gelernt.</p> <p>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.</p> <p>Grüsse<br> Siri</p>