Vor fünf Jahren habe ich Screen Resolution ≠ Browser Window geschrieben. Die Idee war, dass zu dieser Zeit viel über die Monitorgröße im Verhältnis zum Design von Websites gesprochen wurde. JavaScript gibt gerne die Abmessungen eines Monitors an: screen.width. Aber wie nützlich ist das? Ist es nicht nützlicher zu wissen, wie groß das eigentliche Browserfenster ist? Natürlich ist es das. Wir schreiben keine Media Queries basierend auf screen.width, sondern basierend auf der Breite des Browserfensters, z. B. @media (min-width: 400px) {}. (Und vielleicht eines Tages Element-/Container-Queries.)
Die Tatsache, dass wir responsives Design praktizieren können und tun, bedeutet, dass wir aufgehört haben, uns Sorgen darüber zu machen, was eine "durchschnittliche" Browsergröße ist. Dennoch sind es interessante Daten.
Im Jahr 2011 habe ich, um diese ursprünglichen Daten zu sammeln, 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 Personen ein Browserfenster hatten, das genauso groß war wie ihr Monitor. Aber das ist ein wenig unfair, da es die Browser-UI und dergleichen nicht berücksichtigt. Mit großzügigen Toleranzen (200 Pixel) fanden wir, dass 61 % der Sitzungen ein Browserfenster hatten, das der Monitorgröße ziemlich nahe kam.
Das sind jedoch immer noch 39 % der Sitzungen, bei denen das Browserfenster kleiner ist, was interessant ist.
Die Daten sind heute einfacher zu erhalten
Vorausgesetzt, Sie verwenden Google Analytics. Damals waren diese Daten nicht in Google Analytics verfügbar, heute schon, man muss nur einen benutzerdefinierten Bericht erstellen, um sie zu erhalten. Dank Charlie Livingston, der dies zur Sprache brachte und mir zeigte.
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 aus Browsergröße und Bildschirmauflösung
Für css-tricks.com. Und selbst wenn ich mir das Ende anschaue, werden alle 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 erfasst würden.
Die meisten Kombinationen repräsentieren nur einen winzigen Bruchteil des Ganzen. Zum Beispiel repräsentiert eine Bildschirmauflösung von 1600×900 mit einer Browsergröße von 1580×810 0,12 % der Benutzer. Und es gibt Tausende von weiteren ähnlichen Kombinationen.
Es gibt einige ganz oben
| Browser-Größe | Bildschirmauflösung | Benutzer |
|---|---|---|
| 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 Benutzer.
Vielen Dank, dass Sie sich die Zeit genommen haben, dies zu schreiben. Ich bin Fotograf und mein Ziel ist es, ein möglichst großes Bild in meinem Portfolio bereitzustellen und gleichzeitig die Ladezeit der Seite zu minimieren.
Abgesehen davon, dass ein großer Teil der Größen oben unter "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 Bericht ausführe, den Sie uns gezeigt haben, sehe ich Statistiken wie
(nicht festgelegt)
400×300
1350×640
1350×660
380×560
Definitiv einen Blick wert. Nochmals vielen Dank.
P.S. Man fragt sich, warum Facebook eine Bildgröße von 2048 Pixel für Fotos empfiehlt. Liegt das vielleicht daran, dass sie noch nicht gut für Retina-Bildschirme liefern können?