Сегодня мы проведём исследование на предмет современных тенденций разрешений экранов устройств и используемых браузеров на начало 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-31month=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% (это нереально, по факту меньше. И я уверен, что часть это просто чьи-то древние боты так представляются, собирают какие-то данные).
РАЗРУШИТЕЛЬ МИФОВ / VGA, DVI, HDMI И РАЗРЕШЕНИЕ ЭКРАНА
Разрешения экранов
- 1366×768 — 9.17%
- 640×360 — 7.83%
- 1920×1080 — 7.70%
- 1024×768 — 4.46%
- 896×414 — 4.28%
- 667×375 — 4.22%
- 780×360 — 3.20%
- 812×375 — 3.03%
- 760×360 — 2.80%
- 1536×864 — 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%.
Разрешения экранов
- 360×640 — 9.7%
- 1366×768 — 8.98%
- 1920×1080 — 8.46%
- 375×667 — 4.07%
- 414×896 — 3.92%
- 1536×864 — 3.39%
- 360×780 — 3.3%
- 360×760 — 2.99%
- 375×812 — 2.78%
- 1440×900 — 2.77%
- 360×720 — 2.53%
- 768×1024 — 2.53%
- 414×736 — 2.12%
- 1280×720 — 1.99%
- 412×846 — 1.91%
- 412×892 — 1.79%
- 412×869 — 1.67%
- 1600×900 — 1.63%
- 360×740 — 1.62%
- 1280×800 — 1.5%
Типы устройств
- Смартфоны — 52.02%
- Десктоп — 45.29%
- Планшеты — 2.7%
Screen resolution statistics за 2020 год ru.screenresolution.org/year-2020
- 1920×1080 — 18.14%
- 1366×768 — 12.02%
- 1536×864 — 6.19%
- 1440×900 — 4.55%
- 360×640 — 3.86%
- 800×600 — 3.13%
- 2560×1440 — 3.03%
- 1024×768 — 3.03%
- 1280×720 — 2.98%
- 1600×900 — 2.90%
- 1680×1050 — 2.49%
- 1280×1024 — 1.99%
- 1280×800 — 1.77%
- 360×780 — 1.69%
- 375×667 — 1.66%
- 393×851 — 1.38%
- 1360×768 — 1.35%
- 375×812 — 1.32%
- 414×896 — 1.25%
- 360×760 — 1.24%
- 360×720 — 1.17%
- 1920×1200 — 1.12%
- 384×800 — 1.01%
Типы устройств
| Смартфоны | 59.62% | 52.02% | 55.82% |
| Десктоп | 37.44% | 45.29% | 41.365% |
| Планшеты | 2.94% | 2.7% | 2.82% |
О как, эра планшетов проходит, смартфоны доминируют над компьютерами, но несильно.
Браузеры под которые оптимизировать сайты
| Яндекс.Радар | 70.18% | 16.39% | 2.22% | 0.39% |
| LiveInternet | 83.6% | 10.6% | 2.5% | 0.6% |
| Hotlog | 78.32% | 14.45% | 5.05% | 2.22% |
| W3Counter | 69.15% | 17.0% | 2.22% | 3.25% |
| StatCounter | 76.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 имеет дисплей разрешением 1334×750 пикселей, но вёрстка сайта всё равно будет под 375x667px. И вот нам необходимо в первую очередь определить минимальный размер экрана для смартфона, как стартовую точку адаптивной вёрстки. Долгое время это был размер 320x568px (iPhone 5), до этого 240px, но данные устройства уже отжили.
Очевидно на 2021 год, устройства с экраном 360px являются той самой минимальной стартовой точкой, диапазон смартфоновых устройств будет примерно до 640 .. 780px, имеет смысл делать «резиновый» дизайн в этом промежутке, дизайнеру так же стоит по 10-15 пикселей по бокам оставить на отступы..
Далее планшеты iPad mini 768px, iPad pro 11 — 834px, и LiveInternet показал 800×600 — 27.1%. При таких показателях 768px всё ещё остаётся обязательным.
Следом обязательно размер на 1000px, это и старые мониторы разрешением 1024px, ноутбуки, планшеты итп устройства. Так же популярные ноутбучные разрешения 1280x и 1366x. На мой взгляд достаточно дизайна на 1000px на экранах побольше просто будут поля по краям 140 и 183px соответственно.
Остаются большие разрешения экранов, посмотрим по таблице ниже.
Разных астрономических размеров 2570×798, 3840×848 (4k) в статистике не видно, да и на таких расширениях экран скорее всего поделён на два, браузер в сложенном виде будет, а не на весь экран.
| 320x | 0.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% |
| 800x | 27.1% | 1.83% | — | — | 3.13% | 10.69% |
| 1024x | 21% | 3.41% | 4.46% | — | 3.03% | 7.975% |
| 1280x | 5.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% |
| 1366x | 8.7% | 12.29% | 9.17% | 8.98% | 12.02% | 10.232% |
| 1440x | 1.5% | 1.69% | — | 2.77% | 4.55% | 2.6275% |
| 1536x | — | 3.58% | 2.74% | 3.39% | 6.19% | 3.975% |
| 1600x | 5.0% | 2.51% | — | 1.63% | 2.90% | 3.01% |
| 1920x | 8.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% смартфонно-планшетного парка, плюс разные расширения типа 896×414 — 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 год:
Послесловие
Конечно есть варианты того как сделать вёрстку сайта, вплоть до постоянного масштабирования, но как бы не старался программист/верстальщик, всё равно присутствуют проблемы перестроения и масштабирования, не возможно без заумной математики и нагрузки на браузер при по/пере/строении (вплоть до лагов на мощных компах (встречал такие сайты), не говоря уже об устройствах поменьше с порезанным железом по умолчанию) задать одинаковый размер на все разрешения, скажем заголовку текста в процентах итп. величинах от размера экрана устройства, всё равно на определённых границах (несколько раз) будет выбиваться из размерности и придётся в любом случае вставлять правки в CSS. Поэтому люблю делать вёрстку с переключением в каких-то точках 360px, 1000px итд., само собой дизайнер обязан отрисовать все эти точки.
Следующее подобное исследование имеет смысл проводить ещё лет через пять, ситуация немного изменится к тому времени.
Источник: fsen.ru
Как узнать и изменить разрешение экрана монитора?
Есть немало способов узнать, какое разрешение монитора установлено сейчас у вас на компьютере. Вот только 2 из них, этого будет предостаточно.
Дополнительно: если у вас Windows 10, вам лучше подойдет урок: как изменить частоту и разрешение экрана на Windows 10.
1. Первый способ – самый быстрый:
- Нажмите правой кнопкой мыши по пустой области рабочего стола и в открывшемся меню выберите «Разрешение экрана».
- В центре открывшегося окна будет написано разрешение вашего экрана монитора.
2. Второй способ – через панель управления:
- Откройте «Панель управления», для этого нажмите «Пуск/Панель управления».
- Далее выберите «Настройка разрешения экрана», если у вас стоят «маленькие значки» в панели управления, то выберите «Экран», затем справа нажмите «Настройка разрешения экрана».
- У вас откроется тоже окно, что и при первом способе.
Теперь, когда вы знаете, как открывать окно «Разрешение экрана» можно и изменить само разрешение.
У вас есть монитор нуждающийся в ремонте? Зачем искать что-то новое, если здесь вы можете отремонтировать ваше устройство.
Как изменить разрешение экрана монитора?
Чтобы изменить разрешение на другое нажмите левой кнопкой мыши по текущему и в выпадающем списке выберите новое.
Совет: Мы всегда советуем оставлять то разрешение экрана монитора, которое рекомендуется компьютером, да бы избежать не совместимости и потери качества изображения.
Далее нажмите кнопку «Применить», после нажатия разрешение измениться и откроется окно «Параметры экрана» и в течении 15 секунд вы можете «Сохранить изменения» или «Отменить изменения». Если вы нечего не нажмете, то разрешение экрана останется прежним.
Затем нажмите «ОК» и окно закроется.
Вот и все. Теперь у вас не должно быть проблем с просмотром и изменением разрешения экрана монитора.
Понравилось? Поделись с друзьями!
Дата: 05.02.2013 Автор/Переводчик: Linchak
Источник: linchakin.com
Основные разрешения (размеры) экранов для адаптивной верстки
Для грамотной разработки дизайна макета необходимо иметь четкое представление о фактических разрешениях устройства во Viewport т.к. они отличаются от заявленных производителем разрешений экранов смартфонов.