Ingrid: @media, Bildschirmbreite und Smartphones

Hallo,

jetzt habe ich noch eine weitere Frage: Wenn ich mich für au Internet kundig mache in Bezug auf @media und Bildschirmbreite, dann finde ich zum Teil in etwa folgende Ratschläge für das Erstellen einer Internetseite:

  • eine Version bis 30em für die Handys machen
  • eine Version bis 50em für die Tablets
  • eine Version darüber für die Computer

Allerdings scheint das alte Literatur sein, die von Uralthandys handelt. Bei neuen Modellen findet man beispielsweise 1440px = 90em als Bildschirmbreite!

Wenn ich eine Version für Smartphones machen will (also zum Beispiel mit <nav>-Tasten, die untereinander angeordnet sind), soll ich dann statt der em-Angaben lieber cm-Angaben verwenden? Oder würdet Ihr mir zu noch ganz anderen Lösungen raten?

Danke im voraus für Eure Hilfe. Und nehmt es mir bitte nicht übel, wenn ich einige Tage brauche, um Euch zu antworten.

Herzliche Grüsse
Ingrid

  1. Hallo Ingrid,

    (1) Displaypixel sind nicht CSS Pixel. Je nach Gerät gibt es da Verhältnisse von 2:1 oder sogar 3:1. Das machen die Geräte deshalb, damit Du kein Mikroskop zum Ablesen einer Webseite auf einem Retina-Display brauchst. Ein Gerät mit 1440 Displaypixeln Bildbreite kann also durchaus nur 720 oder 480 CSS Pixel in der Breite aufweisen.

    Aufschluß über die realen Werte gibt die Eigenschaft window.devicePixelRatio.

    (2) 16px ≠ 1em. Es ist oft so, ja, aber es ist nicht zwingend gleich. Verstellt der Anwender seine Textskalierung, oder definierst Du eine andere Fontgröße für den Body, ist das Verhältnis nicht mehr gegeben.

    Rolf

    --
    sumpsi - posui - clusi
  2. dann finde ich zum Teil in etwa folgende Ratschläge für das Erstellen einer Internetseite:

    • eine Version bis 30em für die Handys machen
    • eine Version bis 50em für die Tablets
    • eine Version darüber für die Computer

    Ich nehme einfach die Webseite oder eine HTML-Version des Templates mit Beispieltext („lorem ypsum“) und verkleinere die Anzeigefläche mit den üblichen Browsertools - oder halt das Browser-Fenster und schaue dabei zu dass die Seite in jeder Größe gefällig aussieht und bedienbar bleibt. Setze also die „Stop-Punkte“ bei den in den Tools angezeigten Größen, wann immer das notwendig oder geboten erscheint - oder auch nur „besser gefällt“.

    Anders ausgedrückt: Ich verwende keine festen Maße.

  3. @@Ingrid

    Wenn ich mich für au Internet kundig mache in Bezug auf @media und Bildschirmbreite, dann finde ich zum Teil in etwa folgende Ratschläge für das Erstellen einer Internetseite:

    • eine Version bis 30em für die Handys machen
    • eine Version bis 50em für die Tablets
    • eine Version darüber für die Computer

    Allerdings scheint das alte Literatur sein, die von Uralthandys handelt.

    Mag sein oder auch nicht. Solch Unsinn findet man leider auch heute noch immer wieder.

    Wie ich unlängst erst sagte, hat das nichts mit responsive design – also Webdesign[1] – zu tun; es schließt sich aus.

    Oder würdet Ihr mir zu noch ganz anderen Lösungen raten?

    Ja, zu responsive design: Breakpoints (media queries) dort, wo es der Inhalt erfordert.

    Oder gar keine. Moderne Layouttechniken (Grid mit auto-fill/auto-fit, Flexbox) machen media queries oft überflüssig (intrinsic design[2]).

    Unter dem Stichwort sollte einiges im Zwischennetz zu finden sein, insbesondere von Jen Simmons (YouTube-Kanal Layout Land).

    LLAP 🖖

    --
    Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.

    1. John Allsopp ↩︎

    2. Jen Simmons ↩︎

  4. Hallo!

    Erst einmal herzlichen Dank für Eure Antworten. Ich bitte Euch um Entschuldigung, dass ich mich erst jetzt zurückmelde. Aber ich hatte einige unvorhergesehene berufliche und familiäre Verpflichtungen. Und ich wollte auch nicht in wenigen Minuten auf Unverdautes antworten, und noch dazu durch die Übereilung unklar formuliert. Denn dann hättet Ihr Zeit mit manchen Eurer Antworten verloren.

    Von dem Unterschied der Bildschirmpixel und der CSS-Pixel hatte ich noch nie etwas gehört. Wie ich diese Information praktisch verwenden soll, weiß ich noch nicht.

    Und dann ist da noch das Problem, dass ich es nicht schaffe, das Smartphone mit media-queries anzusprechen. Auf XAMPP funktionniert es: Wenn ich den Bildschirm probehalber zusammenschiebe, verändern sich die Eigenschaften entsprechend den @media-Vorgaben.
    Aber auf dem echten Smartphone ändert sich der Bildschirm nur, wenn ich die Eigenschaften bei Computer-großer em-Breite verändere. Aber ich will andere Eigenschaften für die Smartphone-Version als für die Computer-Version.
    Und die automatischen Voreinstellungen des Smartphones passen mir überhaupt nicht: Da werden beispielsweise die <p> in normaler Größe anzeigt, während die <li> und die <td> seltsamerweise auf Lupengröße verkleinert werden.

    Ganz konkret geht es mir um folgende Fragen:

    • Wie soll ich es konkret schaffen, beispielsweise einzelne Fotos für die Smartphone-Version zu unterdrücken, um das Datenvolumen zu erleichtern, wenn ich nicht weiß, wie ich die Smartphone-Version tatsächlich ansprechen kann? (Ich übertreibe es nicht mit dem Datenvolumen, aber manche Fotos sind auf der großen Computerbildschirmfläche durchaus willkommen, während sie nicht unbedingt nötig für die Smartphone-Version sind.)

    • Wie kann ich es konkret vermeiden, dass die Navigationsleiste in der Smartphone-Version waagrecht angezeigt wird (mit winzigen Buchstaben, für die ein guter Teil der Benutzer zoomen muss), während große Teile der restlichen Texte von vorherein in normaler Schriftgröße angezeigt werden? Was soll ich machen, damit die Navigationsleiste senkrecht angezeigt wird und die gesamte Smartphone-Bildschirmbreite einnimmt? (Um kein Missverständnis aufkommen zu lassen: Ich weiß, wie man die Navigationsleiste waagrecht oder senkrecht programmieren kann. Aber mir fehlt das Wissen darüber, wie ich es machen kann, damit eine andere Version auf dem Computer als auf dem Smartphone erscheint.)
      Irgendwie schaffe ich es nicht, die Buchstabengröße u. ä. bei der Smartphoneversion zu beeinflussen. Dies ist unter anderem deshalb ärgerlich, weil das Smartphone die <p> in normaler Größe anzeigt, während es die <li> und die <td> seltsamerweise auf Lupengröße verkleinert.

    Ich wünsche Euch noch einen schönen Tag.

    Herzliche Grüße
    Ingrid

    1. Hallo Ingrid,

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. Hallo Matthias,

        insbesondere die viewport Angabe, die habe ich für die Smartphone Probleme im Verdacht.

        Rolf

        --
        sumpsi - posui - clusi
      2. Hallo

        @Ingrid Dein Problem, dass zum Beispiel Listen sehr klein, mit deinen Worten „in Lupengröße“, dargestellt werden, riecht mir nach im Seitenheader nicht oder falsch gesetzter Viewportangabe. Wenn du also gemäß Matthias' Fragenkatalog deinen Code prüfst, achte bitte auch darauf, die Angabe so zu setzen, wie es im Wiki empfohlen wird.

        Tschö, Auge

        --
        Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
        Hohle Köpfe von Terry Pratchett