Fast Site Engine
Высокопроизводительный движок для сайтов
Заказать сайт на основе движка
О движкеПроизводительностьБезопасностьТехнические требованияSEO 
Лицензионное соглашение
Демо
Установка
Панель управления
Модули
Документация
Шаблоны
Тесты производительности php
Планы на будущее
Список изменений
Отзывы и пожелания
Переходим на Линукс
Всякое разное
Всякое разное  »  Размеры адаптивной вёрстки для сайта

Размеры адаптивной вёрстки для сайта

Сегодня мы проведём исследование на предмет современных тенденций разрешений экранов устройств и используемых браузеров на начало 2021 года. Выясним какие размеры адаптивной вёрстки для сайта использовать и под какие браузеры оптимизировать сайт.

Когда-то давно делали отдельные сайты под мобильные устройства, но сегодня более популярная и любимая поисковиками адаптивная вёрстка (сайт растягивается/перестраивается в зависимости от экрана устройства). За последние несколько лет вёрстка, как таковая, сместилась в сторону векторных форматов из-за разных размеров экранов и чёткости отрисовки векторных изображений (значков, логотипы, элементы дизайна, итп). Растровыми остаются только фотографии на сайте. Т.е. рисование дизайна в Фотошопе как таковое отходит, сейчас популярны разные векторные редакторы и в первую очередь онлайновые типа Фигмы.

Теперь перейдём непосредственно к исследованиям, посмотрим статистику разных сервисов собирающих данные и сведём их в общую таблицу. Затем вычислим среднее значение. Сервисов этих много, все рассматривать смыла нет, плюс минус они показывают одно и то же. Часть данных откинем как погрешность (меньше процента, оставлю только Internet Explorer, некоторые всё ещё думают что он актуален, в то время как его поддержка закончена в 2015г и выпущен взамен Edge), задача выявить самые используемые и популярные, на которые и стоит ориентироваться при создании сайтов.

Популярные браузеры и разрешения экранов

Начнём с того, кто к нам поближе - Яндекс.Радар за 2020 год radar.yandex.ru/browsers:

  • Google Chrome - 40.42% (движок Blink: Google - Chromium (ответвление от WebKit))
  • Яндекс.Браузер - 21.49% (Chromium)
  • Safari - 11.34% (WebKit: Apple)
  • Opera - 4.41% (Chromium)
  • Android Browser - 3.09% (WebKit)
  • Samsung Internet - 2.41% (Chromium)
  • Firefox - 2.22% (Gecko: Mozilla)
  • MIUI browser - 1.96% (WebKit)
  • Microsoft Edge - 1.45% (Chromium, EdgeHTML: Microsoft (2014—2019))
  • Internet Explorer - 0.39% (Trident (MSHTML), Tasman - Mac OS X. (1995—2015))

Итого:
Chromium: Google Chrome 40.42% + Яндекс.Браузер 21.49% + Opera 4.41% + Samsung Internet 2.41% + Microsoft Edge 1.45% = 70.18%
WebKit: Safari 11.34% + Android Browser 3.09% + MIUI browser 1.96% = 16.39%
Gecko: Firefox - 2.22% = 2.22%

Типы устройств

  • Смартфоны - 59.62%
  • Десктоп - 37.44%
  • Планшеты - 2.94%


LiveInternet в среднем за 3 месяца по февраль 2021 liveinternet.ru/stat/ru/browsers.html?date=2021-01-31&period=month

Chromium: Google Chrome 56.8% + Яндекс.Браузер 22.3% + Opera (Blink) 4.5% = 83.6%
WebKit: Mobile Safari 9.7% + Safari 0.9% = 10.6%
Gecko: Firefox 2.5% = 2.5%

Internet Explorer 11 = 0.6% (Скорее всего это самая реалистичная цифра по остаткам реальных пользователей этого браузера).

Разшерения экранов

  • 800x600 - 27.1%
  • 1024x768 - 21.0%
  • 640x480 - 14.8%
  • 1920x1080 - 8.7%
  • 1366x768 - 8.7%
  • 1600x1200 - 5.0%
  • 1280x800 - 2.8%
  • 1280x1024 - 2.3%
  • 1440x900 - 1.5%
  • 1152x864 - 1.0%
  • 1680x1050 - 0.8%
  • 240x320 - 0.1%


Hotlog за январь 2021 hotlog.ru/global/screen

Chromium: Chrome 65.42% + Яндекс 12.27% + Opera 0.31% + Edge 0.32% = 78.32%
WebKit: Safari 14.45% = 14.45%
Gecko: Firefox 5.05% = 5.05%

Internet Explorer = 2.22%.

Разшерения экранов

  • 360x640 - 12.29%
  • 1366x768 - 12.29%
  • 1920x1080 - 12.01%
  • 375x667 - 4.47%
  • 393x851 - 3.99%
  • 360x780 - 3.78%
  • 360x720 - 3.74%
  • 1536x864 - 3.58%
  • 1280x1024 - 3.50%
  • 1024x768 - 3.41%
  • 414x896 - 2.78%
  • 360x760 - 2.76%
  • 1600x900 - 2.51%
  • 768x1024 - 2.41%
  • 412x892 - 2.04%
  • 375x812 - 1.97%
  • 800x600 - 1.83%
  • 1280x800 - 1.78%
  • 320x568 - 1.77%
  • 1440x900 - 1.69%
  • 412x915 - 1.48%
  • 1280x720 - 1.27%


W3Counter: Global Web Stats за январь 2021 года w3counter.com/globalstats.php?year=2021&month=1

Chromium: Chrome 65.3% + Edge 2.35% + Opera 1.5% = 69.15%
WebKit: Safari 17.0% = 17.0%
Gecko: Firefox 4.1% = 2.22%

Статистика по версиям и она не вся показана, Internet Explorer примерно 5.6% - 2.35% = 3.25% (это нереально, по факту меньше. И я уверен, что часть это просто чьи-то древние боты так представляются, собирают какие-то данные).

Разшерения экранов

  • 1366x768 - 9.17%
  • 640x360 - 7.83%
  • 1920x1080 - 7.70%
  • 1024x768 - 4.46%
  • 896x414 - 4.28%
  • 667x375 - 4.22%
  • 780x360 - 3.20%
  • 812x375 - 3.03%
  • 760x360 - 2.80%
  • 1536x864 - 2.74%


StatCounter Global Stats с января 2020 по январь 2021 года gs.statcounter.com/screen-resolution-stats

Chromium: Chrome 64.1% + Samsung Internet 3.33 + UC Browser 2.61 + Edge 2.35% + Opera 2.26% + Edge Legacy 2.17 + Edge 0.01 = 76.83%
WebKit: Safari 17.21% = 17.0%
Gecko: Firefox 4.7% = 4.7%

Internet Explorer = 1.68%.

Разшерения экранов

  • 360x640 - 9.7%
  • 1366x768 - 8.98%
  • 1920x1080 - 8.46%
  • 375x667 - 4.07%
  • 414x896 - 3.92%
  • 1536x864 - 3.39%
  • 360x780 - 3.3%
  • 360x760 - 2.99%
  • 375x812 - 2.78%
  • 1440x900 - 2.77%
  • 360x720 - 2.53%
  • 768x1024 - 2.53%
  • 414x736 - 2.12%
  • 1280x720 - 1.99%
  • 412x846 - 1.91%
  • 412x892 - 1.79%
  • 412x869 - 1.67%
  • 1600x900 - 1.63%
  • 360x740 - 1.62%
  • 1280x800 - 1.5%

Типы устройств

  • Смартфоны - 52.02%
  • Десктоп - 45.29%
  • Планшеты - 2.7%


Screen resolution statistics за 2020 год ru.screenresolution.org/year-2020

  • 1920x1080 - 18.14%
  • 1366x768 - 12.02%
  • 1536x864 - 6.19%
  • 1440x900 - 4.55%
  • 360x640 - 3.86%
  • 800x600 - 3.13%
  • 2560x1440 - 3.03%
  • 1024x768 - 3.03%
  • 1280x720 - 2.98%
  • 1600x900 - 2.90%
  • 1680x1050 - 2.49%
  • 1280x1024 - 1.99%
  • 1280x800 - 1.77%
  • 360x780 - 1.69%
  • 375x667 - 1.66%
  • 393x851 - 1.38%
  • 1360x768 - 1.35%
  • 375x812 - 1.32%
  • 414x896 - 1.25%
  • 360x760 - 1.24%
  • 360x720 - 1.17%
  • 1920x1200 - 1.12%
  • 384x800 - 1.01%


Подводим итоги:

Типы устройств

Выборка 1Выборка 2Средний процент
Смартфоны59.62%52.02%55.82%
Десктоп37.44%45.29%41.365%
Планшеты2.94%2.7%2.82%

О как, эра планшетов проходит, смартфоны доминируют над компьютерами, но несильно.

Браузеры под которые оптимизировать сайты

Chromium
(Google Chrome)
WebKit
(Safari)
Gecko
(Firefox)
Trident
(Internet Explorer)
Яндекс.Радар70.18%16.39%2.22%0.39%
LiveInternet83.6%10.6%2.5%0.6%
Hotlog78.32%14.45%5.05%2.22%
W3Counter69.15%17.0%2.22%3.25%
StatCounter76.83%17.0%4.7%1.68%
Средний процент:75.616%15.088%3.338%1.628%

Как видим, браузеры на движке Chromium (Google Chrome, Яндекс.Браузер, Opera, Vivaldi, Samsung Internet, Microsoft Edge итп.) жёстко доминируют и процент по моим наблюдениям прирастает.
На втором месте движок WebKit (Safari, Android Browser, MIUI browser итп.) и он уверенно держится в районе 10-15% последние годы.
На третьем месте Gecko (Firefox), долго был моим любимым браузером, но постепенно начал становиться проблемным из-за некоторых решений разработчиков, плюс выравнивание текста на пиксель ниже, как итог пользователи убывают, тенденция всё хуже из года в год - не вижу смысла в его поддержке..
И специальный столбик Trident (Internet Explorer) также показывает почти мёртвый браузер.
Остальным браузерам остаётся только догонять или оставаться в районе погрешности, смысла в оптимизации под них нет.

Актуально проверять вёрстку в браузерах Google Chrome и Safari (аналог на том же движке Arora под Windows/Linux), тем самым покрываем около 90% пользователей.

Разшерения экрана

Теперь самый трудный пункт, разрешения экрана устройств, оно может иметь большее пикселей (px), но размер экрана всё равно будет 375px. Например, iPhone 7 имеет дисплей разрешением 1334x750 пикселей, но вёрстка сайта всё равно будет под 375x667px. И вот нам необходимо в первую очередь определить минимальный размер экрана для смартфона, как стартовую точку адаптивной вёрстки. Долгое время это был размер 320x568px (iPhone 5), до этого 240px, но данные устройства уже отжили.
Очевидно на 2021 год, устройства с экраном 360px являются той самой минимальной стартовой точкой, диапазон смартфоновых устройств будет примерно до 640 .. 780px, имеет смысл делать "резиновый" дизайн в этом промежутке, дизайнеру так же стоит по 10-15 пикселей по бокам оставить на отступы..
Далее планшеты iPad mini 768px, iPad pro 11 - 834px, и LiveInternet показал 800x600 - 27.1%. При таких показателях 768px всё ещё остаётся обязательным.
Следом обязательно размер на 1000px, это и старые мониторы разрешением 1024px, ноутбуки, планшеты итп устройства. Так же популярные ноутбучные разрешения 1280x и 1366x. На мой взгляд достаточно дизайна на 1000px на экранах побольше просто будут поля по краям 140 и 183px соответственно.
Остаются большие разрешения экранов, посмотрим по таблице ниже.
Разных астрономических размеров 2570×798, 3840×848 (4k) в статистике не видно, да и на таких расширениях экран скорее всего поделён на два, браузер в сложенном виде будет, а не на весь экран.

LiveInternetHotlogW3CounterStatCounterScreen resolutionСредний процент
320x0.1%1.77%---0.935%
360x-22.57%
(12.29 + 3.78 + 3.74 + 2.76)
-20.14%
(9.7 + 3.3 + 2.99 + 2.53 + 1.62)
7.96%
(3.86 + 1.69 + 1.24 + 1.17)
16.89%
768x-2.41%-2.53%-2.47%
800x27.1%1.83%--3.13%10.69%
1024x21%3.41%4.46%-3.03%7.975%
1280x5.1%
(2.8 + 2.3)
6.55%
(3.5 + 1.78 + 1.27)
-3.49%
(1.99 + 1.5)
6.74%
(2.98 + 1.99 + 1.77)
5.47%
1366x8.7%12.29%9.17%8.98%12.02%10.232%
1440x1.5%1.69%-2.77%4.55%2.6275%
1536x-3.58%2.74%3.39%6.19%3.975%
1600x5.0%2.51%-1.63%2.90%3.01%
1920x8.7%12.01%7.70%8.46%19.26%
(18.14% + 1.12%)
11.226%
2560x  ----3.03%3.03%

Имеем обязательное разрешение для адаптивной вёрстки 360pх, лучше "резиновое" до 640px, оно покроет практически все смартфоны, я думаю примерно 50% устройств от общего количества с учётом возможного разворота.
768x и 800x дают в сумме около 13% смартфонно-планшетного парка, плюс разные расширения типа 896x414 - 4.28% накинут ещё около 10% устройств, итого более 20%, имеет смысл делать!
Далее ноутбучные расширения 1024px обязателен, 1280x можно пропустить, отступ с боков в 140px приемлем и хорошо смотрится. Этим закрываем около 13% устройств.
1366x - стоит делать обязательно - 10% устройств, плюс: 1440x, 1536x, 1600x так же можно ничего не делать, отступ с боков: 74, 85, 117px
1920x - обязателен. Всё что выше не имеет особого смысла и скорее является прихотью, тем более что майнинг на добрую пятилетку отложил приход 4k мониторов из-за отсутствия видеокарт, и судя по курсу Биткоина - это ещё надолго.

Идеальный вариант адаптивной вёрстки на 2021 год:

  • 360pх до 640px растягивающийся, минус отступы по 10 - 15 пикселей с боков
  • 768px
  • 1000px -> 1024x (минус 24 пикселя на скролл браузера = 1000px для дизайна, отступы по желанию (пункты ниже так же)).
  • 1342px -> 1366x
  • 1512px -> 1536x по желанию, чтоб накрыть 1600x и чуть большие расширения, около 10% устройств.
  • 1896px -> 1920x

24px вычислил практическим путём, переключая стили оформления Windows XP, с тех пор ещё ни разу не подводил данный выбор.

Экономный вариант адаптивной вёрстки на 2021 год:

  • 360pх
  • 768px
  • 1000px -> 1024x
  • 1896px -> 1920x

Совсем экономный вариант адаптивной вёрстки на 2021 год:

  • 360pх
  • 1000px -> 1024x

Послесловие

Конечно есть варианты того как сделать вёрстку сайта, вплоть до постоянного масштабирования, но как бы не старался программист/верстальщик, всё равно присутствуют проблемы перестроения и масштабирования, не возможно без заумной математики и нагрузки на браузер при по/пере/строении (вплоть до лагов на мощных компах (встречал такие сайты), не говоря уже об устройствах поменьше с порезанным железом по умолчанию) задать одинаковый размер на все разрешения, скажем заголовку текста в процентах итп. величинах от размера экрана устройства, всё равно на определённых границах (несколько раз) будет выбиваться из размерности и придётся в любом случае вставлять правки в CSS. Поэтому люблю делать вёрстку с переключением в каких-то точках 360px, 1000px итд., само собой дизайнер обязан отрисовать все эти точки.

Следующее подобное исследование имеет смысл проводить ещё лет через пять, ситуация немного изменится к тому времени.

Страница сгенерирована за 0.003149 секунды
На один процесс веб-сервера: 318 стр./сек.
Всего Apache может отдать: 81 408 стр./сек.
Выделено php памяти: 443.19 KB, real_usage: 2 MB

© Все права защищены 2004 - 2021
Карта сайта
Отслеживать изменения в Твиттере
Политика конфиденциальности

Браузер построил за сек.
Полное время сек.

С момента выгрузки предыдущей страницы из памяти браузера: сек.