Сегодня мы проведём исследование на предмет современных тенденций разрешений экранов устройств и используемых браузеров на начало 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% (это нереально, по факту меньше. И я уверен, что часть это просто чьи-то древние боты так представляются, собирают какие-то данные).
9 Главных Настроек Монитора: Их Нужно Поменять!
Разрешения экранов
- 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
Как улучшить качество изображения на экране компьютера под Windows
В соответствии с характеристиками монитора система Windows автоматически применяет оптимальные параметры отображения, в частности, разрешение экрана, частоту обновления и цвета. Эти параметры также зависят от типа монитора. Чтобы настроить параметры дисплея или восстановить настройки по умолчанию, следуйте приведенным ниже рекомендациям.
ЖК-мониторы, которые также называют плоскими мониторами, существенно вытеснили ЭЛТ-мониторы. Они значительно легче и тоньше, чем громоздкие ЭЛТ-мониторы со стеклянными трубками. ЖК-мониторы также представлены широким диапазоном форм и размеров, в том числе широкоформатными экранами и экранами стандартной ширины с соотношениями сторон 16:9 и 16:10 для широкоэкранных моделей и 4:3 в моделях стандартной ширины. Ноутбуки также используют плоские дисплеи.
В случае с обоими типами мониторов чем больше на экране установлено точек на дюйм, тем лучше отображаются шрифты. Увеличивая количество точек на дюйм, вы увеличиваете разрешение экрана. Разрешение, которую вы используете, зависит от разрешения, поддерживаемого монитором. Чем выше разрешение, например 1900×1200 пикселей, тем четче будут отображаться элементы.
Они также будут меньше, что позволит разместить на экране дополнительные элементы. Чем ниже разрешение, например 800×600 пикселей, тем меньше элементов может поместиться на экране (размер элементов увеличивается).
Windows позволяет увеличивать или уменьшать размер текста и других элементов на экране, сохраняя оптимальное разрешение монитора.
Лучшие параметры дисплея для ЖК-мониторов
Если вы пользуетесь ЖК монитором, проверьте его разрешение. Это позволит определить четкость изображения на экране. Для ЖК-мониторов рекомендуется устанавливать собственное разрешение: то, которое производитель предусмотрел для монитора согласно его размерам.
Чтобы проверить разрешение монитора, проверьте параметры дисплея на панели управления:
- Откройте окно «Разрешение экрана».
- Щелкните раскрывающийся список рядом с Разрешение. Найдите разрешение со значком (рекомендуется). Это собственное разрешение ЖК-монитора. Обычно это самое высокое разрешение, которое он поддерживает.
Сведения о собственном разрешении ЖК-монитора можно получить от его производителя или поставщика.
ЖК-мониторы, на которых установлено собственное разрешение, обычно отображают текст лучше, чем ЭЛТ-мониторы. Технически ЖК-мониторы могут поддерживать разрешение, ниже собственного. Однако текст может отображаться нечетко, изображение может быть малым, размещенным посредине экрана, окаймленным черной рамкой, а изображение может выглядеть растянутым.
Поскольку автономные мониторы обычно больше, чем экраны ноутбуков, они имеют высшее разрешение, чем ноутбуки.
Разрешение ЖК-монитора в соответствии с его размерами
| 19-дюймовый ЖК-монитор, стандартные пропорции | 1280 × 1024 |
| 20-дюймовый ЖК-монитор, стандартные пропорции | 1600 × 1200 |
| 20- и 22-дюймовый ЖК-монитор, широкий экран | 1680 × 1050 |
| 24-дюймовый ЖК-монитор, широкий экран | 1920 × 1200 |
| 13- и 15-дюймовый экран ноутбука, стандартные пропорции | 1400 × 1050 |
| 13- и 15-дюймовый экран ноутбука, широкий экран | 1280 × 800 |
| 17-дюймовый экран ноутбука, широкий экран | 1680 × 1050 |
Настройка цветопередачи для ЖК-монитора
Чтобы получить лучшую цветопередачу ЖК-монитора, убедитесь, что режим отображения установлен на 32-бита цвета. Это измерение означает глубину цвета: количество значений цвета, которые можно назначить одному пикселю на изображении. Значение глубины цвета может колебаться от 1 (черно-белое изображение) до 32 бит (более 16,7 млн. цветов).
- Откройте окно «Разрешение экрана».
- Щелкните Дополнительные параметры и перейдите на вкладку Монитор.
- В разделе Цвета выберите True Color (32 бита) и нажмите кнопку ОК .
Управление цветом
Windows также содержит дополнительные элементы управления цветом. Системы управления цветом обеспечивают максимально точную цветопередачу на любых устройствах, в частности на мониторах и принтерах.
Калибровка дисплея
Программное обеспечение для калибровки дисплея позволяет получить точную цветопередачу на экране. Если на компьютере установлено программное обеспечение для калибровки дисплея от другого поставщика, калибруйте дисплей с помощью него.
Устройства для калибровки дисплея часто поставляются вместе с необходимым программным обеспечением. Используя устройство для калибровки с программным обеспечением, с которым он поставлялся, можно достичь лучших результатов цветопередачи.
Windows также имеет функцию калибровки дисплея.
Настройка яркости и контрастности
На внешних дисплеях яркость и контраст настраиваются с помощью элементов управления монитора, а не средствами Windows. Большинство ЭЛТ- и ЖК-мониторов имеют на передней панели кнопки или другие элементы управления, с помощью которых можно управлять яркостью и контрастом.
В некоторых мониторах на экране открывается меню, в котором выполняется соответствующую настройку. Чтобы узнать, как пользоваться этими элементами управления, обратитесь к руководству к монитору или на веб-сайте производителя.
Яркость экранов большинства ноутбуков настраивается средствами Windows. Если вы пользуетесь ноутбуком, яркость можно настроить в окне «Электропитание».
Улучшение отображения текста
В Windows используется технология ClearType, которая включена по умолчанию. С помощью этой технологии шрифты на мониторе отображаются максимально четко и плавно. Это облегчает длительное чтение текста, не утомляя глаза. Наибольшей эффективности можно достичь при работе с ЖК-дисплеями, плоскими мониторами, ноутбуками и портативными устройствами.
Убедитесь, что технология ClearType не отключена, особенно когда текст на экране выглядит нечетким. Технология ClearType можно настроить для работы с конкретным монитором.
Источник: windows-school.ru
Как выбрать диагональ и разрешение монитора
При покупке монитора для компьютера решающим фактором является его размер, от которого также зависит разрешение дисплея. Как выбрать хороший монитор, на котором не будут видны отдельные пиксели, рассказываем в нашей статье.
Размер монитора и разрешение
От самого большого монитора не будет никакой пользы, если у него маленькое разрешение. Именно оно указывает на то, сколько пикселей может отображать экран. От этого также зависит, сколько места будет на экране для окон разных программ.
Сегодня минимальным уровнем разрешения у новых мониторов является Full HD — 1920 x 1080 пикселей. Как правило, мониторы размером от 24 до 27 дюймов имеют разрешение Full HD — и то, на 27-дюймовом мониторе с таким разрешением вы будете видеть пиксели, если расположитесь близко к экрану. На дисплеях меньше 24 дюймов с Full HD разрешением иконки программ и текст будут слишком мелкими, а на мониторах больше 27 дюймов — недостаточно четкими.
У экраном с диагональю более 27 дюймов уровень разрешения должен быть выше. Для игровых и профессиональных компьютеров, используемых, например, для монтажа видео или работы в системах САПР (CAD), рекомендуется разрешение 2560 x 1440 пикселей. Новейшие мониторы имеют разрешение 4K (4096 × 2160). Но им требуется соответствующая вычислительная мощность (видеокарта).
Как правильно выбрать диагональ монитора
Какого размера монитор подходит именно вам, зависит от того, для каких целей вы используете свой компьютер.
Диагональ экрана измеряется в дюймах: один дюйм равен 2,54 см.
17 дюймов: стандартные мониторы, которые все еще можно увидеть в государственных организациях и офисах, имеют диагональ экрана 17 дюймов (43,18 см) и разрешение 1280 x 1024 пикселей. Для повседневной работы и серфинга в интернете этого вполне достаточно. Но такой небольшой размер монитора уже давно не актуален, и большинство производителей предпочитают большие размеры.
19 дюймов: 19-дюймовые мониторы (48,26 см) немного лучше для глаз. Они в основном используют то же разрешение, что и меньшие 17-дюймовые. Места для программных окон не будет больше, зато будет крупнее шрифт — а это удобнее для работы.
22 дюйма: еще больше обзора у вас будет на 22-дюймовом мониторе (55,88 см) с разрешением 1680 x 1050 пикселей. Приятный размер для работы за письменным столом.
24 дюйма: разрешение Full HD, как правило, встречается на экранах от 24 дюймов (60,92 см). С разрешением 1920 x 1080 пикселей у вас будет достаточно места для воплощения в жизнь многозадачности. Два окна разных программ можно удобно расположить рядом друг с другом. Кроме того, 24 дюйма — хороший выбор для геймеров.
27 дюймов: если вы ищите монитор побольше, обратите внимание на 27-дюймовые модели (68,58 см). Здесь разрешение имеет очень большое значение. В Full HD (1920 x 1080 пикселей) уже становятся видны отдельные пиксели. Так что лучше сразу брать устройство с разрешением 2560 x 1440 пикселей или выше.
30 дюймов и более: приобретать мониторы с диагональю 30 дюймов и более имеет смысл только для профессиональных целей, например, для использования таких программ, как Photoshop, программ САПР или для монтажа видео. Вот тут как раз и необходимо высокое разрешение. При таком размере монитора для игр можно уже задуматься о разрешении 4K.
- Подключение выключателя: как сделать это правильно?=«content_internal_link»>
- Как бесплатно установить Windows 10=«content_internal_link»>
Источник: ichip.ru