Es ist fünf Jahre her, seit ich Screen Resolution ≠ Browser Window geschrieben habe. Die Idee war, dass damals viel über die Monitorgröße im Verhältnis zu unserem Webdesign gesprochen wurde. JavaScript gibt gerne die Abmessungen eines Monitors aus: screen.width. Aber wie nützlich ist das? Ist es nicht nützlicher zu wissen, wie groß das tatsächliche Browserfenster ist? Natürlich ist es das. Wir schreiben keine Media Queries basierend auf screen.width, wir schreiben sie basierend auf der Breite des Browserfensters, z. B. @media (min-width: 400px) {}. (Und vielleicht eines Tages auch Element-/Container-Queries.)
Die Tatsache, dass wir responsives Design praktizieren können und tun, bedeutet, dass wir aufgehört haben, uns Sorgen über eine "durchschnittliche" Browsergröße zu machen. Dennoch sind das interessante Daten.
Im Jahr 2011 habe ich, um die ursprünglichen Daten zu sammeln, etwas JavaScript geschrieben, um sowohl die Bildschirmgröße als auch die Browserfenstergröße zu messen und beides als einen Datensatz in einer Datenbank zu speichern. Wir stellten fest, dass weniger als 1 % der Leute ein Browserfenster hatten, das genauso groß war wie ihr Monitor. Aber das ist ein wenig unfair, da es die Browser-UI usw. nicht berücksichtigt. Mit großzügigem Spielraum (200 Pixel) fanden wir, dass 61 % der Sitzungen ein Browserfenster hatten, das der Monitorgröße ziemlich nahe kam.
Das sind aber immer noch 39 % der Sitzungen, in denen das Browserfenster kleiner ist, was interessant ist.
Die Daten sind heute leichter zu bekommen
Vorausgesetzt, Sie verwenden Google Analytics. Damals waren diese Daten in Google Analytics nicht verfügbar, jetzt schon, man muss nur einen benutzerdefinierten Bericht erstellen, um sie zu erhalten. Danke an Charlie Livingston, dass er dies angesprochen und mir gezeigt hat.
Erstellen Sie einen benutzerdefinierten Bericht mit Browsergröße
Fügen Sie eine sekundäre Dimension hinzu: Bildschirmauflösung
Jetzt können Sie beide Zahlen zusammen betrachten
Ich erhalte 25.927 eindeutige Kombinationen von Browsergröße und Bildschirmauflösung
Für css-tricks.com, wohlgemerkt. Und selbst wenn ich mir das absolute Ende ansehe, werden die Zahlen auf die nächste Zehnerstelle gerundet, was bedeutet, dass es wahrscheinlich eine Größenordnung mehr Variationen gibt, wenn diese Zahlen bis auf das Pixel genau verfolgt würden.
Die meisten Kombinationen stellen einen winzigen Bruchteil des Ganzen dar. Zum Beispiel stellen eine Bildschirmauflösung von 1600×900 mit einer Browsergröße von 1580×810 0,12 % der Nutzer dar. Und es gibt Tausende von ähnlichen Kombinationen.
Es gibt ein paar an der Spitze
| Browsergröße | Bildschirmauflösung | Nutzer |
|---|---|---|
| 1350×660 | 1366×768 | 5.31% |
| 1900×950 | 1920×1080 | 4.14% |
| 1900×970 | 1920×1080 | 3.58% |
| 1350×640 | 1366×768 | 3.52% |
Der lange Schwanz repräsentiert weitaus mehr Nutzer.
Vielen Dank, dass Sie sich die Zeit genommen haben, dies zu schreiben. Ich bin Fotograf und mein Ziel ist es, in meinem Portfolio ein möglichst großes Bild zu präsentieren und gleichzeitig die Ladezeit der Seite zu minimieren.
Abgesehen davon, dass ein großer Teil der Größen am oberen Ende als "nicht festgelegt" endet, sehe ich einige überraschende Ergebnisse. Der Bericht über die Geräteklasse sagt mir, dass die überwiegende Mehrheit der Besucher Desktops nutzt, aber wenn ich den von Ihnen gezeigten Bericht ausführe, sehe ich Statistiken wie
(nicht festgelegt)
400×300
1350×640
1350×660
380×560
Das ist definitiv eine Untersuchung wert. Nochmals vielen Dank.
P.S. Man fragt sich, warum Facebook eine Bildgröße von 2048 Pixel für Fotos vorschlägt. Liegt das vielleicht daran, dass sie noch nicht gut auf Retina-Bildschirme liefern können?