tag:forum.selfhtml.org,2005:/selfElement bei mobilen Geräten ausblenden – SELFHTML-Forum2012-08-02T12:49:13Zhttps://forum.selfhtml.org/self/2012/jul/29/element-bei-mobilen-geraeten-ausblenden/1554485#m1554485cssFrage2012-07-29T18:19:52Z2012-07-29T18:19:52ZElement 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#m1554487suitspam.2012@rebell.athttp://rebell.at/2012-07-29T18:48:07Z2012-07-29T18:48:07ZElement 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#m1554486Gunnar Bittersmannselfhtml@bittersmann.dehttp://bittersmann.de/2012-07-29T19:01:29Z2012-07-29T19:01:29ZElement 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#m1554488Gunnar Bittersmannselfhtml@bittersmann.dehttp://bittersmann.de/2012-07-29T18:57:38Z2012-07-29T18:57:38ZElement 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#m1554489suitspam.2012@rebell.athttp://rebell.at/2012-07-29T19:34:39Z2012-07-29T19:34:39ZElement 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#m1554490Siri2012-07-30T05:43:43Z2012-07-30T05:43:43ZElement 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#m1554491suitspam.2012@rebell.athttp://rebell.at/2012-07-30T11:23:23Z2012-07-30T11:23:23ZElement 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#m1554492Siri2012-07-30T11:47:04Z2012-07-30T11:47:04ZElement 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#m1554503Gunnar Bittersmannselfhtml@bittersmann.dehttp://bittersmann.de/2012-07-30T13:04:32Z2012-07-30T13:04:32ZElement 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#m1554493suitspam.2012@rebell.athttp://rebell.at/2012-07-30T13:13:10Z2012-07-30T13:13:10ZElement 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#m1554494Siri2012-07-30T13:41:25Z2012-07-30T13:41:25ZElement 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#m1554495suitspam.2012@rebell.athttp://rebell.at/2012-07-30T15:28:32Z2012-07-30T15:28:32ZElement 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#m1554502Siri2012-07-30T15:59:15Z2012-07-30T15:59:15ZElement 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#m1554496Siri2012-07-30T18:58:06Z2012-07-30T18:58:06ZBin 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#m1554497suitspam.2012@rebell.athttp://rebell.at/2012-07-30T22:28:16Z2012-07-30T22:28:16ZBin 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#m1554498Siri2012-07-31T05:24:23Z2012-07-31T05:24:23ZBin 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#m1554499suitspam.2012@rebell.athttp://rebell.at/2012-08-01T08:14:53Z2012-08-01T08:14:53ZBin 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#m1554501Siri2012-08-01T08:20:15Z2012-08-01T08:20:15ZBin 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#m1554500Gunnar Bittersmannselfhtml@bittersmann.dehttp://bittersmann.de/2012-08-02T12:49:13Z2012-08-02T12:49:13ZBin 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#m1554504Siri2012-07-30T13:29:20Z2012-07-30T13:29:20ZElement 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>