mediaqueries vs moderne smartphones

[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