mediaqueries vs moderne smartphones

[alter sack]

Guten Tag!

Mal eine möglicherweise ziemlich blöde Frage zum Thema "Responsive Webdesign" an die Fachleute hier. Moderne Smartphones haben Auflösungen, die denen eines Desktops entsprechen. Also denke ich, dass man sich den Aufwand für Mediaqueries unterhalb 600px getrost schenken kann. Als älterer Mensch bin ich eher an der Lesbarkeit interessiert. Daher möchte ich ein sehr altes (geboren 1998) und mittlerweile recht großes ( >2.000 Dateien) Hobby-Projekt so erweitern, dass einzig und allein die Frage "Smartphone oder kein Smartphone" über die Art der Darstellung entscheidet. Aber so eine, oder besser, genau diese Abfrage habe ich bisher nicht finden können.

Kurze Zusatzinfo Bisher: 3 Spalten Layout - OK für Tablet und Desktop, dabei fast alle html und css Versionen genutzt. Geplant: Zusätzliches 1 Spalten Layout - Nur für Smartphones.

[JürgenB]

Hallo,

… Mediaqueries unterhalb 600px …

ermittele die Größe des Anzeigegerätes nicht über eine Pixelabfrage, sondern über eine „em“-Abfrage.

Gruß
Jürgen

[alter sack]

… Mediaqueries unterhalb 600px …

ermittele die Größe des Anzeigegerätes nicht über eine Pixelabfrage, sondern über eine „em“-Abfrage.

Hallo Jürgen,

Danke für die schnelle Antwort! Ich bin kein Grafiker und habe seit Anbeginn mit Prozenten bei css und html gearbeitet. (War scheinbar schon damals eine gute Idee, denn fast alle Datei-Inhalte sind "responsive" und könnten per include oder iframe, je nachdem was weniger Arbeit macht, leicht übernommen werden.) Daher: Gibt es ein mehr oder weniger festes Verhältnis zwischen "em" und "cm"? Oder kann man, besser spät als nie, einfach nur die Display-Breie in "cm" abfragen?

[Matthias Apsel]

Hallo alter sack,

Daher: Gibt es ein mehr oder weniger festes Verhältnis zwischen "em" und "cm"?

Nein, siehe Wiki

Oder kann man, besser spät als nie, einfach nur die Display-Breie in "cm" abfragen?

Jein. Aber das Ergebnis nutzt dir nichts, denn du weißt nicht, welche Schriftgrößen eingestellt sind.

Bis demnächst
Matthias

[alter sack]

Hallo Matthias!

Das "Jein" klingt gut. Also nochmal klar gefragt: Kann man die Display-Breite (portrait) in "cm" abfragen, egal ob direkt oder mit einer kleinen Berechnung rausfinden?

Alles unterhalb 8 Zentimeter (portrait) soll einspaltig beliefert werden. Das die angelieferte Schriftgröße 100 Prozent beträgt, dürfte die Lesbarkeit grundsätzlich gegeben sein.

Wie oben kurz gesagt, das Ding ist groß und, wie oben nicht gesagt, es läuft mit Frames (Der Gott eurer Wahl habe sie selig), der Arbeitsaufwand wäre anderenfalls riesig.

[MrMurphy1]

Hallo

Kann man die Display-Breite (portrait) in "cm" abfragen

Nein. Vergiß cm komplett für Webseiten.

der Arbeitsaufwand wäre anderenfalls riesig.

Die Zeit des Umstiegs war vor 16 Jahren. Da wirst du kaum herumkommen.

Gruss

MrMurphy

[Auge]

Hallo

Das "Jein" klingt gut.

Das Jein führt dich in die Irre.

Also nochmal klar gefragt: Kann man die Display-Breite (portrait) in "cm" abfragen, egal ob direkt oder mit einer kleinen Berechnung rausfinden?

Ja, für einen bestimmten Gerätetyp, dessen technische Spezifikation dir zur Verfügung steht, wird das funktionieren. Für alle anderen Typen, also für fast alle Geräte, wird es wegen dieser Anpassungen nicht funktionieren.

Alles unterhalb 8 Zentimeter (portrait) soll einspaltig beliefert werden. Das die angelieferte Schriftgröße 100 Prozent beträgt, dürfte die Lesbarkeit grundsätzlich gegeben sein.

Wie ermittelst du außerhalb deines Zugriffsbereiches, welche Schriftgröße auf dem Zielsystem eingesetzt wird? Du legst ja nur fest, dass die Schriftgröße deines Dokuments 100% der im Browser (auf Smartphones häufiger im Betriebssystem) eingestellten Schriftgröße betragen möge. Welche das konkret ist, weißt du nicht.

Tschö, Auge

[JürgenB]

Hallo,

Also nochmal klar gefragt: Kann man die Display-Breite (portrait) in "cm" abfragen, egal ob direkt oder mit einer kleinen Berechnung rausfinden?

du zeichnest auf dem Bildschirm eine Linie mit bekannter Pixellänge und bittest den Seitenbesucher dann, diese Linie zu vermessen und dir über ein Formular mitzuteilen. Setze aber die Timeoutzeit nicht zu knapp, die Suche nach einem Messband (etc.) kann dauern ... :)

Gruß
Jürgen

[alter sack]

Oh großer Meister,

vielen Dank für den vorangegangenen Versuch sinnvoll zu antworten. Allerdings sind deine ironischen Fähigkeiten offensichtlich ebenso beschränkt, wie die Perzeption von Fragestellungen ausserhalb des kanonischen Rasters. Daran musst du noch arbeiten.

[JürgenB]

vielen Dank für den vorangegangenen Versuch sinnvoll zu antworten. Allerdings sind deine ironischen Fähigkeiten offensichtlich ebenso beschränkt, wie die Perzeption von Fragestellungen ausserhalb des kanonischen Rasters. Daran musst du noch arbeiten.

hast du den Inhalt denn wenigstens verstanden?

[JürgenB]

Hallo,

Angaben in „em“ beziehen sich auf die Schriftgröße des Elternelements, also letztendlich auf die Default-Schriftgröße des Dokuments. Daher sind Breakpoint-Angaben in em auch eine gute Wahl, da ja die Entscheidung, ob eine Seite ein- oder mehrspaltig gezeigt werden soll, nicht nur von der Displaygröße abhängt, sondern auch von der Schriftgröße.

Gruß
Jürgen

[Gunnar Bittersmann]

@@alter sack

Gibt es ein mehr oder weniger festes Verhältnis zwischen "em" und "cm"?

Nein. Es gibt ein mehr oder weniger festes Verhältnis zwischen rem (root em) und px (CSS-Pixel): in den meisten (nicht in allen) Browsern ist das 1 : 16, wenn nicht eine andere Schriftgröße fürs Wurzelelement angegeben wurde.

Um das in cm umrechnen zu können, müsste ein Browser das Verhältnis von CSS-Pixeln zu physischen Pixeln kennen und auch wissen, wieviele physische Pixel pro cm (bzw. Zoll, ppi) auf dem jeweiligen Ausgabegerät sind.

LLAP 🖖

[Gunnar Bittersmann]

@@alter sack

Moderne Smartphones haben Auflösungen, die denen eines Desktops entsprechen. Also denke ich, dass man sich den Aufwand für Mediaqueries unterhalb 600px getrost schenken kann.

Nein. Du musst hier unterscheiden zwischen physischen Pixeln und CSS-Pixeln. Mein Gerät bspw. hat zwar 640 physischen Pixel in der Breite, aber 320 CSS-Pixel. Für Mediaqueries sind CSS-Pixel relevant.

… dass einzig und allein die Frage "Smartphone oder kein Smartphone" über die Art der Darstellung entscheidet.

Nein, das kannst du nicht unterscheiden. Die Unterscheidung macht gar keinen Sinn, da der Übergang Smartphone–Phablet–Tablet–Desktop ohnehin fließend ist.

LLAP 🖖

[MrMurphy1]

Hallo

Hast du mal einen Link zu der Seite? Ich finde jedenfalls keinen.

Mit deinen bisherigen Infos wirst du dich im Forum in unnützen Nebendiskussionen verschleißen ohne deinem eigentlichen Ziel näher zu kommen.

Gruss

MrMurphy

[alter sack]

Hallo MrMurphy!

Dank sei Dir und allen anderen Helfern. Wahrscheinlich hast du Recht. Dabei ist die Frage doch ganz einfach: Gibt es eine Möglichkeit, gezielt nur Geräte anzusprechen, die eine max. physische Breite von 8 cm (portrait) haben?

[Matthias Scharwies]

Servus!

Dabei ist die Frage doch ganz einfach: Gibt es eine Möglichkeit, gezielt nur Geräte anzusprechen, die eine max. physische Breite von 8 cm (portrait) haben?

Wie gesagt: Mach es so

Herzliche Grüße

Matthias Scharwies

[Auge]

Hallo

Dank sei Dir und allen anderen Helfern. Wahrscheinlich hast du Recht. Dabei ist die Frage doch ganz einfach: Gibt es eine Möglichkeit, gezielt nur Geräte anzusprechen, die eine max. physische Breite von 8 cm (portrait) haben?

Wie oft willst du auf das „Nein“ nicht hören?

Tschö, Auge

[Matthias Scharwies]

Servus!

Moderne Smartphones haben Auflösungen, die denen eines Desktops entsprechen.

Ja, aber Auflösung != Breite des Bildschirms

Also denke ich, dass man sich den Aufwand für Mediaqueries unterhalb 600px getrost schenken kann.

Als älterer Mensch bin ich eher an der Lesbarkeit interessiert. Daher möchte ich ein sehr altes (geboren 1998) und mittlerweile recht großes ( >2.000 Dateien) Hobby-Projekt so erweitern, dass einzig und allein die Frage "Smartphone oder kein Smartphone" über die Art der Darstellung entscheidet. Aber so eine, oder besser, genau diese Abfrage habe ich bisher nicht finden können.

Das sind eben doch media queries:

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */  
 
header, nav, article, aside, footer, und-was-du-sonst-noch-hast {
  width: 100%;
}
 

/* Viewports mit großer Auflösung */
@media all and (min-width: 30em) {
/* article wird doppelt so breit wie die beiden asides */
  article {                        
  width: 50%;
  }
 
  aside {
  width:25%;
  }
  #news {
  width: 25%; 
  }
}

Das CSS ist nocht kompliziert. Die Schriftgröße und auch die breakpoints für die media queries sollten, wie von den anderen gesagt, in em notiert werden.

Im head sollte noch folgende Angabe stehen:

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

Schau mal, ob dir das schon hilft.

Herzliche Grüße

Matthias Scharwies

[alter sack]

Ein kurzes abschliessendes Hallo zusammen und Danke an alle Helfer.

to whom it may concern:

Hier gibt es ein recht nützliches Javascript zum Thema: https://frankslinux.wordpress.com/2012/03/16/javascript-ppi-des-bildschirms-ermitteln/

"Auch ein blindes Huhn findet mal 'ne Linie". Sogar ohne Rücksprache mit Usern, die ihr Lineal suchen müssen ;-)

[JürgenB]

Hier gibt es ein recht nützliches Javascript zum Thema: https://frankslinux.wordpress.com/2012/03/16/javascript-ppi-des-bildschirms-ermitteln/

Zitat hieraus:

„So weit so gut. Oder eben auch nicht. Denn: die meisten Betriebssysteme lügen ihre Browser an.“

[Matthias Scharwies]

Servus!

Ein kurzes abschliessendes Hallo zusammen und Danke an alle Helfer.

"Auch ein blindes Huhn findet mal 'ne Linie". Sogar ohne Rücksprache mit Usern, die ihr Lineal suchen müssen ;-)

eine moderne Alternative wäre Window.matchMedia

Herzliche Grüße

Matthias Scharwies

[marctrix]

Hej alter,

Ein kurzes abschliessendes Hallo zusammen und Danke an alle Helfer.

Hier gibt es ein recht nützliches Javascript zum Thema: https://frankslinux.wordpress.com/2012/03/16/javascript-ppi-des-bildschirms-ermitteln/

Wer nicht hören will, muss fühlen...

Marc