tag:forum.selfhtml.org,2005:/self window.matchMedia('(min-width: 40em)').matches – SELFHTML-Forum 2018-06-01T20:46:40Z https://forum.selfhtml.org/self/2018/jun/1/window-punkt-matchmedia-min-width-40em-punkt-matches/1723474#m1723474 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-06-01T06:57:29Z 2018-06-01T06:57:29Z window.matchMedia('(min-width: 40em)').matches <p>hallo</p> <p>Ich experimentiere gerade mit</p> <pre><code class="block">window.matchMedia('(min-width: 40em)').matches && ... </code></pre> <p>Ziel ist ein Hamburger-Popup-Navigation nur für mobiles.</p> <p>Ich frage mich jetzt, wie ich den guten Umschaltpunkt festlege. Die obige Angabe ist etwas adhoc.</p> <p>Im Effekt sollen Anwender meiner Klapper-Logic eine Horizontalnavigation zu einer Vertikalen Listennavigation umbauen können falls die Klasse mobileTrue vorliegt.</p> <p>Wo/wie legt ihr selber Knackpunkte fest</p> <p>Wie fange ich am besten Browser ab, die window.matchMedia nicht kennen?</p> <pre><code class="block">if(window.matchMedia){ ... } </code></pre> <p>so?</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/jun/1/window-punkt-matchmedia-min-width-40em-punkt-matches/1723477#m1723477 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-01T07:11:29Z 2018-06-01T07:11:29Z window.matchMedia('(min-width: 40em)').matches <p>@@beatovich</p> <blockquote> <p>Ziel ist ein Hamburger-Popup-Navigation nur für mobiles.</p> </blockquote> <p>Woher kommt dieser Wunsch, die Navigation auf Mobilgeräten unbedingt hinter einem Hamburger-Icon verstecken zu müssen?</p> <blockquote> <p>Ich frage mich jetzt, wie ich den guten Umschaltpunkt festlege.</p> </blockquote> <p>Der hängt vom Inhalt ab.</p> <p>Mit JavaScript hast du die Möglichkeit, die vom Menü benötigte Breite auszulesen und darauf zu reagieren, wenn diese die Viewport-Breite überschreitet.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/1/window-punkt-matchmedia-min-width-40em-punkt-matches/1723486#m1723486 JürgenB https://www.j-berkemeier.de 2018-06-01T09:30:54Z 2018-06-01T09:30:54Z window.matchMedia('(min-width: 40em)').matches <p>Hallo Beat,</p> <p>warum machst du die Art der Navigation vom Gerätetyp abhängig. Ich würde da nur prüfen, ob die Navigation passt. Wenn du den Platzbedarfs kennst, verwende ihn, sonst musst du, wie Gunnar schon schrieb, den Platzbedarfs erst ermitteln.</p> <p>Die Unterscheidung zwischen Mobil- und anderem Gerät ist nicht nötig. Z.B. bleibt meine Navigation auf Tablets breit, kann aber auf dem Laptop bei kleinen Viewport eingeklappt sein.</p> <p>Da ich ein Freund von fixen Menüs bin, prüfe ich auch noch die Viewporthöhe.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2018/jun/1/window-punkt-matchmedia-min-width-40em-punkt-matches/1723478#m1723478 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-06-01T07:27:09Z 2018-06-01T07:27:09Z window.matchMedia('(min-width: 40em)').matches <p>hallo</p> <blockquote> <p>@@beatovich</p> <blockquote> <p>Ziel ist ein Hamburger-Popup-Navigation nur für mobiles.</p> </blockquote> <p>Woher kommt dieser Wunsch, die Navigation auf Mobilgeräten unbedingt hinter einem Hamburger-Icon verstecken zu müssen?</p> </blockquote> <p>Frag das jene die das anwenden, und es sind viele. Tatsächlich möchte ich im Klapperwerk Wünschen nachkommen.</p> <blockquote> <blockquote> <p>Ich frage mich jetzt, wie ich den guten Umschaltpunkt festlege.</p> </blockquote> <p>Der hängt vom Inhalt ab.</p> </blockquote> <p>Das denke ich nicht. Hier gehts primär um das Setzen einer Klasse mobileTrue, auf die der CSS Autor dann seinerseits reagieren kann.</p> <blockquote> <p>Mit JavaScript hast du die Möglichkeit, die vom Menü benötigte Breite auszulesen und darauf zu reagieren, wenn diese die Viewport-Breite überschreitet.</p> </blockquote> <p>Ich kann den Platzbedarf von flexiblem Inhalt nicht auswerten. Ich erhalte durchgehend 0/undefined bei clientWidth oder getComputedStyle</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/jun/1/window-punkt-matchmedia-min-width-40em-punkt-matches/1723563#m1723563 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-01T20:40:01Z 2018-06-01T20:40:01Z window.matchMedia('(min-width: 40em)').matches <p>@@beatovich</p> <blockquote> <p>Ich kann den Platzbedarf von flexiblem Inhalt nicht auswerten. Ich erhalte durchgehend 0/undefined bei clientWidth oder getComputedStyle</p> </blockquote> <p><code>offsetWidth</code> sollte das richtige sein. <a href="https://codepen.io/gunnarbittersmann/pen/XNPQZB" rel="noopener noreferrer">Beispiel</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/jun/1/window-punkt-matchmedia-min-width-40em-punkt-matches/1723490#m1723490 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-06-01T09:52:30Z 2018-06-01T09:52:30Z window.matchMedia('(min-width: 40em)').matches <p>hallo</p> <blockquote> <p>warum machst du die Art der Navigation vom Gerätetyp abhängig. Ich würde da nur prüfen, ob die Navigation passt. Wenn du den Platzbedarfs kennst, verwende ihn, sonst musst du, wie Gunnar schon schrieb, den Platzbedarfs erst ermitteln.</p> </blockquote> <p>Wie ich schon schrieb erhalte ich keine sinnvolle Angabe, weil tadaa, die enthaltenen Sachen schon flexibel sind.</p> <blockquote> <p>Die Unterscheidung zwischen Mobil- und anderem Gerät ist nicht nötig. Z.B. bleibt meine Navigation auf Tablets breit, kann aber auf dem Laptop bei kleinen Viewport eingeklappt sein.</p> </blockquote> <p>Es handelt sich nicht um eine Geräte-Unterscheidung sondern um eine Viewport-Unterscheidung.</p> <p>Habe die entsprechende Klasse auch schon zu ifSmallScreen umgeschreiben</p> <p>Es macht nun mal Sinn auf kleinen Bildschirmen bestimmte Dinge erst mal eingeklappt zu präsentieren. Da es diese Mechanismus auf grossen Bildschrirmen aber nicht braucht, muss automatisch eine JS Lösung her.</p> <p>Was der Inhalt der Box ist, ist erst mal egal. Es kann auch eine Navigation sein.</p> <p>Die Frage ist deshalb, wenn wir ziwschen kleinen und grossen Viewports unterscheiden sollen, was ist ein geeigneter Splitpunkt.</p> <p>Ich habe hier mal eine em Angabe gewählt.</p> <p>Ich werde später eine aktuelle Version der Klapper-Logik hochladen. Da wird's dann auch einen Usecase geben.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/jun/1/window-punkt-matchmedia-min-width-40em-punkt-matches/1723491#m1723491 JürgenB https://www.j-berkemeier.de 2018-06-01T10:06:03Z 2018-06-01T10:06:03Z window.matchMedia('(min-width: 40em)').matches <p>Hallo Beat,</p> <p>ich mache die Unterscheidung Groß/Klein vom Inhalt abhängig. Bei einer alten Version meiner Navigation habe ich sie per JS kurz aufgeklappt, vermessen, den Platzbedarf mit der Viewportgröße verglichen und dann entschieden, wie ich sie behandle.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2018/jun/1/window-punkt-matchmedia-min-width-40em-punkt-matches/1723543#m1723543 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-06-01T18:02:29Z 2018-06-01T18:02:29Z window.matchMedia('(min-width: 40em)').matches <p>hallo</p> <p>Ich habe mal meine Klapperlogic neu hochgeladen.</p> <p><a href="https://beat-stoecklin.ch/klapperlogic.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/klapperlogic.html</a></p> <p>Safari für iOS wird wohl nicht auf matchMedia ansprechen.</p> <p>Das CSS ist ziemlich stereotyp gehalten. Es geht ja darum, erst mal mit einem Minimum an Aufwand die Funktionalität zu demonstrieren.</p> <p>Den Breakpoint wird man dann individuell einstellen können, je nach Bedarf.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/jun/1/window-punkt-matchmedia-min-width-40em-punkt-matches/1723557#m1723557 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2018-06-01T20:29:16Z 2018-06-01T20:29:16Z window.matchMedia('(min-width: 40em)').matches <p>Hallo beatovich,</p> <blockquote> <p><a href="https://beat-stoecklin.ch/klapperlogic.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/klapperlogic.html</a></p> </blockquote> <p>Kommentare innerhalb von Tags sind nicht erlaubt. Aber ich wüsste auch nicht, wie man das sonst darstellen könnte.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/jun/1/window-punkt-matchmedia-min-width-40em-punkt-matches/1723558#m1723558 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-06-01T20:32:16Z 2018-06-01T20:32:16Z window.matchMedia('(min-width: 40em)').matches <p>hallo</p> <blockquote> <blockquote> <p><a href="https://beat-stoecklin.ch/klapperlogic.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/klapperlogic.html</a></p> </blockquote> <p>Kommentare innerhalb von Tags sind nicht erlaubt. Aber ich wüsste auch nicht, wie man das sonst darstellen könnte.</p> </blockquote> <p>Ich nehme an, du beziehst dich auf die <em>allgemeine Syntax</em>.</p> <p>Ja das ist schwierig und ich lasse mich da gerne beraten, wie man Code-Beispiele verständlicher strukturiert.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/jun/1/window-punkt-matchmedia-min-width-40em-punkt-matches/1723559#m1723559 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2018-06-01T20:33:28Z 2018-06-01T20:33:28Z window.matchMedia('(min-width: 40em)').matches <p>Hallo beatovich,</p> <blockquote> <blockquote> <blockquote> <p><a href="https://beat-stoecklin.ch/klapperlogic.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/klapperlogic.html</a></p> </blockquote> <p>Kommentare innerhalb von Tags sind nicht erlaubt. Aber ich wüsste auch nicht, wie man das sonst darstellen könnte.</p> </blockquote> <p>Ich nehme an, du beziehst dich auf die <em>allgemeine Syntax</em>.</p> </blockquote> <p>Genau.</p> <blockquote> <p>Ja das ist schwierig und ich lasse mich da gerne beraten, wie man Code-Beispiele verständlicher strukturiert.</p> </blockquote> <p>Ja, das <strong>ist</strong> schwierig.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/jun/1/window-punkt-matchmedia-min-width-40em-punkt-matches/1723564#m1723564 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-06-01T20:46:40Z 2018-06-01T20:46:40Z window.matchMedia('(min-width: 40em)').matches <p>hallo</p> <blockquote> <blockquote> <p>Ich kann den Platzbedarf von flexiblem Inhalt nicht auswerten. Ich erhalte durchgehend 0/undefined bei clientWidth oder getComputedStyle</p> </blockquote> <p><code>offsetWidth</code> sollte das richtige sein. <a href="https://codepen.io/gunnarbittersmann/pen/XNPQZB" rel="noopener noreferrer">Beispiel</a></p> </blockquote> <p>Das Container-Element ist in meinem Fall ein Element mit display:flex, oder was immer der Anwender definiert. Ich kann mich nicht auf solch klare Fälle wie in deinem Beispiel verlassen, denn deines bedingt ja auch zuerst, dass du jegliches Umbrechen verhinderst.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div>