От автора: пять лет назад я написал статью Разрешение экрана ≠ размер окна браузера. Тогда ходило очень много разговоров относительно размеров мониторов и того, как мы проектируем веб-сайты. JS может нам подсказать разрешение монитора с помощью screen.width. Но насколько полезно это свойство? Не лучше ли знать размер окна браузера? Да, лучше. В медиа запросах мы опираемся не на screen.width, а на ширину окна браузера. Например, @media (min-width: 400px) {}. Ну иногда еще используем элементные запросы/запросы контейнеров.
Суть в том, что мы можем и практикуем методики адаптивного дизайна, но совсем забыли о среднестатистическом размере окна браузера. Хотя эта информация до сих пор важна.
В 2011 году для сбора этих данных я написал скрипт, который измерял размер экрана и размер окна браузера и сохранял оба значения в одну запись в базе данных. Мы поняли, что меньше чем у 1% людей размер окна браузера был таким же большим, как их монитор. Но слегка несправедливо измерять только активное окно браузера без его интерфейса и т.д., а также больших padding’ов (200px). В итоге мы выяснили, что у 61% сессий размер окна браузера почти совпадал с размером монитора.
Остается 39% сессий, где размер окна браузера меньше размера монитора, что довольно интересно.
Визуализация размеров окна браузера (зеленый), наложенных поверх размеров экрана (красный)
Сегодня намного легче получать эти данные
Предположим, что вы пользуетесь Google Analytics. Тогда такой информации в Google Analytics не было, сейчас есть. Чтобы ее получить, нужно всего лишь построить пользовательский отчет. Спасибо Чарли Ливингстону, что показал, как это делать.
Как делать пользовательский отчет по размерам окна браузера
Добавляем второе измерение: разрешение экрана
Теперь можно посмотреть на обе цифры:
Я получил 25 927 различных комбинаций размеров окна браузера и разрешений экранов
Эта цифра относится к сайту css-tricks.com. И даже если смотреть на самые крайние цифры после запятой, видно, что они округляются до ближайшей 10. То есть если бы эти цифры были с точностью до пикселя, порядок величины отличался бы сильнее.
Большинство комбинаций представляют лишь крохотную часть от целого. К примеру, разрешение экрана 1600х900 с окном браузера 1580х810 составляет 0,12% от всех пользователей. И таких комбинаций тысячи.
ТОП комбинаций:
Пользователей гораздо больше.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
