ottogal: responsive menu und Retina

Hallo in die Runde, hallo Gunnar,

eine modifizierten Version des responsive menu von @Gunnar Bittersmann funktioniert prima; aber die Wahl des (einzigen) Breakpoints macht mir Kopfzerbrechen.
Selbst wenn ich ihn auf 80em hoch setze, kollabiert das Menü auf einem hochauflösenden mobilen Display nicht und ist somit praktisch unbedienbar. Offenbar müsste der Breakpoint in Abhängig davon gesetzt werden, ob ein Retina-Display vorliegt oder nicht.
Nun habe ich leider keine Ahnung, wie eine derartige Abfrage einzubauen wäre. Womit meine Frage gestellt ist.
(Wenn ich die SELFHTML-Suche mit Retina befrage, finde ich nur was über Bilder.)

Dank für Rat
ottogal

  1. hallo

    Hallo in die Runde, hallo Gunnar,

    eine modifizierten Version des responsive menu von @Gunnar Bittersmann funktioniert prima; aber die Wahl des (einzigen) Breakpoints macht mir Kopfzerbrechen.

    Dann zeige dein Kopfzerbrechen.

  2. Servus!

    ... aber die Wahl des (einzigen) Breakpoints macht mir Kopfzerbrechen.
    Selbst wenn ich ihn auf 80em hoch setze, kollabiert das Menü auf einem hochauflösenden mobilen Display nicht und ist somit praktisch unbedienbar. Offenbar müsste der Breakpoint in Abhängig davon gesetzt werden, ob ein Retina-Display vorliegt oder nicht.
    Nun habe ich leider keine Ahnung, wie eine derartige Abfrage einzubauen wäre. Womit meine Frage gestellt ist.
    (Wenn ich die SELFHTML-Suche mit Retina befrage, finde ich nur was über Bilder.)

    Ich habe, da du breakpoints setzen willst, die Seite media queries durchsucht und device-pixel-ratio gefunden. Das verweist auf resolution.

    Herzliche Grüße

    Matthias Scharwies

    --
    "Bin ich denn der Einzigste hier, wo Deutsch kann?"
    1. hallo

      Ich habe, da du breakpoints setzen willst, die Seite media queries durchsucht und device-pixel-ratio gefunden. Das verweist auf resolution.

      Seit wann braucht man das?

      1. Servus!

        hallo

        Ich habe, da du breakpoints setzen willst, die Seite media queries durchsucht und device-pixel-ratio gefunden. Das verweist auf resolution.

        Seit wann braucht man das?

        Ich noch nie, der OP hier:

        "Offenbar müsste der Breakpoint in Abhängig davon gesetzt werden, ob ein Retina-Display vorliegt oder nicht."

        Herzliche Grüße

        Matthias Scharwies

        --
        "Bin ich denn der Einzigste hier, wo Deutsch kann?"
        1. Hallo

          Servus!

          hallo

          Ich habe, da du breakpoints setzen willst, die Seite media queries durchsucht und device-pixel-ratio gefunden. Das verweist auf resolution.

          Seit wann braucht man das?

          Ich noch nie, der OP hier:

          "Offenbar müsste der Breakpoint in Abhängig davon gesetzt werden, ob ein Retina-Display vorliegt oder nicht."

          Dann sollten wir ihm doch bitte erst einmal den Unterschied zwiscfhen geräte- und CSS-Pixel erklären und ihn in der Hinsicht beruhigen, dass der Breakpoint unabhängig davon ist, dass ein Retina-Display verbaut ist. Eine Breiten- oder Höhenangabe in einem Media-Query bezieht sich auf CSS-Pixel.

          @ottogal Wenn ein Display zum Beispiel eine physikalische Breite von 640px hat, aber den Inhalt mit 320px (Breiten)-Auflösung darstellt, dann werden CSS-Angaben auf Basis der 320px angesetzt. Das sind die CSS-Pixel, auf die sich alles zu beziehen hat.

          Tschö, Auge

          --
          Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
          Kleine freie Männer von Terry Pratchett
          1. Danke euch allen.

            "Offenbar müsste der Breakpoint in Abhängig davon gesetzt werden, ob ein Retina-Display vorliegt oder nicht."

            Dies meine Vermutung war also falsch.

            Dann sollten wir ihm doch bitte erst einmal den Unterschied zwiscfhen geräte- und CSS-Pixel erklären und ihn in der Hinsicht beruhigen, dass der Breakpoint unabhängig davon ist, dass ein Retina-Display verbaut ist. Eine Breiten- oder Höhenangabe in einem Media-Query bezieht sich auf CSS-Pixel.

            Das war mir eigentlich (nach einigem Nachlesen zum Thema) auch schon mal klar gewesen.
            Deshalb hat es mich ja gewundert, dass die Seite auf einem mobilen Display (physikalisch 1920x1080, 455dpi) genau so dargestellt wird wie auf meinem 1920x1080-Laptop.

            Der Unterschied Geräte-Pixel vs. CSS-Pixel kommt aber wohl schon deshalb nicht zum Tragen, weil ich ja den Breakpoint nicht in px, sondern in em angebe. Ich frage mich daher, ob ich nicht über max-resolution einen größeren Wert für die Standard-Schriftgröße (font-size für body) angeben sollte...

            1. Ich frage mich daher, ob ich nicht über max-resolution einen größeren Wert für die Standard-Schriftgröße (font-size für body) angeben sollte...

              Das hilft nicht.

  3. @ottogal

    in den head der HTML-Datei:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    vergleiche: https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#Viewport_einstellen

    1. Das hatte ich da schon stehen...