Под какие разрешения экранов адаптировать сайт
Сегодня мы проведём исследование на предмет современных тенденций разрешений экранов устройств и используемых браузеров на начало 2021 года. Выясним какие размеры адаптивной вёрстки для сайта использовать и под какие браузеры оптимизировать сайт.
Когда-то давно делали отдельные сайты под мобильные устройства, но сегодня более популярная и любимая поисковиками адаптивная вёрстка (сайт растягивается/перестраивается в зависимости от экрана устройства). За последние несколько лет вёрстка, как таковая, сместилась в сторону векторных форматов из-за разных размеров экранов и чёткости отрисовки векторных изображений (значков, логотипы, элементы дизайна, итп). Растровыми остаются только фотографии на сайте. Т.е. рисование дизайна в Фотошопе как таковое отходит, сейчас популярны разные векторные редакторы и в первую очередь онлайновые типа Фигмы.
Теперь перейдём непосредственно к исследованиям, посмотрим статистику разных сервисов собирающих данные и сведём их в общую таблицу. Затем вычислим среднее значение. Сервисов этих много, все рассматривать смыла нет, плюс минус они показывают одно и то же. Часть данных откинем как погрешность (меньше процента, оставлю только Internet Explorer, некоторые всё ещё думают что он актуален, в то время как его поддержка закончена в 2015г и выпущен взамен Edge), задача выявить самые используемые и популярные, на которые и стоит ориентироваться при создании сайтов.
Популярные браузеры и разрешения экранов
- 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%
Размер экрана, разрешение и область просмотра: что это значит?
Зачем используется адаптивная вёрстка? Когда вы покупаете устройство, в спецификации вы можете наблюдать такие параметры как размер экрана и его разрешение. Размер экрана - это показатель длины его диагонали в дюймах. Не следует путать его с разрешением дисплея. Этот параметр показывает количество пикселей на экране. Часто он отображается, как количество пикселей по экранной ширине и высоте (например, 1024 × 768).
Устройства с одинаковыми размерами экранов могут иметь разные разрешения. Поэтому разработчики используют окна просмотра при создании страниц, удобных для мобильных устройств. Окна просмотра - это уменьшенные версии, которые позволяют последовательно просматривать сайты на всех устройствах. Окна просмотра часто стандартизированы для меньших размеров разрешения.
Дисплеи настольных компьютеров и ноутбуков всегда находятся в горизонтальной ориентации (ширина больше, чем высота). Мобильные устройства можно поворачивать, чтобы показывать веб-сайты как в альбомной, так и в портретной (высота больше, чем ширина) ориентациях. Это означает, что дизайнеры и разработчики должны учитывать не только размеры экранов для адаптивной верстки, но и эти различия.
Нужна помощь в определении того, удобен ли ваш сайт для просмотра на разных мобильных устройствах? Воспользуйтесь нашим сервисом →.
Послесловие
Конечно есть варианты того как сделать вёрстку сайта, вплоть до постоянного масштабирования, но как бы не старался программист/верстальщик, всё равно присутствуют проблемы перестроения и масштабирования, не возможно без заумной математики и нагрузки на браузер при по/пере/строении (вплоть до лагов на мощных компах (встречал такие сайты), не говоря уже об устройствах поменьше с порезанным железом по умолчанию) задать одинаковый размер на все разрешения, скажем заголовку текста в процентах итп. величинах от размера экрана устройства, всё равно на определённых границах (несколько раз) будет выбиваться из размерности и придётся в любом случае вставлять правки в CSS. Поэтому люблю делать вёрстку с переключением в каких-то точках 360px, 1000px итд., само собой дизайнер обязан отрисовать все эти точки.
Следующее подобное исследование имеет смысл проводить ещё лет через пять, ситуация немного изменится к тому времени.
В этой статье я попытаюсь рассказать, как сделать простой шаблон адаптивным. И, конечно же, я попытаюсь объяснить, что такое адаптивный дизайн.
Что такое адаптивный дизайн?
Я уверен, что вы часто «серфите» по сайтам с мобильных устройств и не раз замечали, что есть сайты, где надо масштабировать страницу, чтобы прочитать текст. А бывает, что еще хуже — текст может не поместится на всю страницу и вам придется крутить страницу и по горизонтали, и по вертикали.
Зайдя на сайт с адаптивным шаблоном все меняется, ибо текст «подстраивается» под ваш телефон (разрешение экрана).
Теория (основы)
Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширина блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).
max-width и width
Тоже очень важная часть в дизайне. Например, ширина нашего сайта 1000 пикселей, но при изменение окна (по ширине, меньше 1000 пикселей), появится горизонтальная прокрутка. Но все поменяется, если мы укажем width: 100%, ибо сайт будет «подстраиваться» под наш экран.
С большими мониторами не так все просто, поскольку текст растянется на весь экран. А получается, если монитор широкоформатный, то текст будет нечитабельным.
Если вам нужно, чтобы сайт остался с такой же шириной, но при этом остался «адаптивным» — надо изменить CSS-код, как указано ниже.
min-width и width
Если чуть выше мы ставили максимальную ширину, то здесь мы устанавливаем минимальную ширину. К примеру, если установить минимальную ширину 200 пикселей, то окно браузера достигает этой ширины и оно больше не будет уменьшаться (появится горизонтальная прокрутка).
Практика
Шаблон, который будет выступать в качестве демонострации, будет иметь в себе три составляющих: шапка, основной контент и боковая колонка (сайтбар).
Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется width и max-width: о них написано выше.
Использование media screen
Стоит отметить, что в media screen задается нужное разрешение экрана устройства. Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.
Таким образом выглядит тег media screen в CSS
Как можно увидеть, мы используем максимальную ширину — 1024px. Данное свойство будет предаваться только тогда, когда ширина окна будет меньше 1024 пикселей.
1024 пикселя
Допустим, что наша цель — чуть-чуть сузить шаблон при этом разрешении, но основной контент и сайтбар должны оставаться на месте.
Вот, что необходимо прописать в CSS
768px
Теперь мы пишем настройки для окон, ширина которых 768 пикселей и меньше. Сейчас мы будем распологать сайтбар под основным контентом.
Для сайтбара ширина та же, а выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (margin-top: 25px;), чтобы эти два блока разделялись.
Для того, чтобы картинки также сужались нужно использовать этот код
В этой статье я попытаюсь рассказать, как сделать простой шаблон адаптивным. И, конечно же, я попытаюсь объяснить, что такое адаптивный дизайн.
Что такое адаптивный дизайн?
Я уверен, что вы часто «серфите» по сайтам с мобильных устройств и не раз замечали, что есть сайты, где надо масштабировать страницу, чтобы прочитать текст. А бывает, что еще хуже — текст может не поместится на всю страницу и вам придется крутить страницу и по горизонтали, и по вертикали.
Зайдя на сайт с адаптивным шаблоном все меняется, ибо текст «подстраивается» под ваш телефон (разрешение экрана).
Теория (основы)
Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширина блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).
max-width и width
Тоже очень важная часть в дизайне. Например, ширина нашего сайта 1000 пикселей, но при изменение окна (по ширине, меньше 1000 пикселей), появится горизонтальная прокрутка. Но все поменяется, если мы укажем width: 100%, ибо сайт будет «подстраиваться» под наш экран.
С большими мониторами не так все просто, поскольку текст растянется на весь экран. А получается, если монитор широкоформатный, то текст будет нечитабельным.
Если вам нужно, чтобы сайт остался с такой же шириной, но при этом остался «адаптивным» — надо изменить CSS-код, как указано ниже.
min-width и width
Если чуть выше мы ставили максимальную ширину, то здесь мы устанавливаем минимальную ширину. К примеру, если установить минимальную ширину 200 пикселей, то окно браузера достигает этой ширины и оно больше не будет уменьшаться (появится горизонтальная прокрутка).
Практика
Шаблон, который будет выступать в качестве демонострации, будет иметь в себе три составляющих: шапка, основной контент и боковая колонка (сайтбар).
Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется width и max-width: о них написано выше.
Использование media screen
Стоит отметить, что в media screen задается нужное разрешение экрана устройства. Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.
Таким образом выглядит тег media screen в CSS
Как можно увидеть, мы используем максимальную ширину — 1024px. Данное свойство будет предаваться только тогда, когда ширина окна будет меньше 1024 пикселей.
1024 пикселя
Допустим, что наша цель — чуть-чуть сузить шаблон при этом разрешении, но основной контент и сайтбар должны оставаться на месте.
Вот, что необходимо прописать в CSS
768px
Теперь мы пишем настройки для окон, ширина которых 768 пикселей и меньше. Сейчас мы будем распологать сайтбар под основным контентом.
Для сайтбара ширина та же, а выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (margin-top: 25px;), чтобы эти два блока разделялись.
Для того, чтобы картинки также сужались нужно использовать этот код
За время существования этого сайта, я менял шаблон несколько раз и даже создавал собственный с нуля.
Одна из главных задач при выборе нового шаблона — это адаптивная верстка сайта под все разрешения экрана.
Краткий план статьи:
Как достичь адаптивности? Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ — это адаптивная верстка сайта с помощью CSS.
Как сделать адаптивную верстку сайта
Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами вставьте следующий код:
Какой я был дурак, что не сделал этого сразу, когда пытался сделать адаптивную верстку сайта.
Проблема мобильных браузеров в их масштабировании верстки сайта, даже адаптивной.
Представьте себе, я рисую дизайн, потом прописываю все нужные стили и запросы, проверяю адаптивность сайта при разных разрешениях. Все вроде бы хорошо! Но, когда я открываю свой блог на смартфоне, я вижу, что сайт просто напросто сжался. Он не адаптировался к мобильному устройству, а просто уменьшились размеры шрифта, картинок и т.д.
Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!
Но ведь этого не может быть!
Оказывается, если не прописать код, который я указал выше, мобильный браузер не понимает, что сайт адаптивный и пытается просто уменьшить страницу сайта, чтобы она влезла в маленький экран мобильника.
Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).
bootstrap адаптивный дизайн
Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.
Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.
Верстка на bootstrap отличается тем, что ширина блока или экрана делится на 12 равных частей. И присваивая определенный класс блоку, можно задать ширину блока равной нужному количеству частей.
Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:
Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.
Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:
Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.
Если разобраться, то работа с бутстрап делает работу с адаптивным дизайном очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.
В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую подписаться на обновления блога, чтобы не упустить этот момент.
Разшерения экрана
Теперь самый трудный пункт, разрешения экрана устройств, оно может иметь большее пикселей (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) в статистике не видно, да и на таких расширениях экран скорее всего поделён на два, браузер в сложенном виде будет, а не на весь экран.
LiveInternet | Hotlog | W3Counter | StatCounter | Screen resolution | Средний процент | |
---|---|---|---|---|---|---|
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% смартфонно-планшетного парка, плюс разные расширения типа 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 год:
Материалы по теме
Типы устройств
Выборка 1 | Выборка 2 | Средний процент | |
---|---|---|---|
Смартфоны | 59.62% | 52.02% | 55.82% |
Десктоп | 37.44% | 45.29% | 41.365% |
Планшеты | 2.94% | 2.7% | 2.82% |
О как, эра планшетов проходит, смартфоны доминируют над компьютерами, но несильно.
Адаптивная верстка CSS media запросы
Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.
Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:
Это код означает, что стили заключенные между « < >» будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.
То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.
Разшерения экранов
- 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%
Разшерения экранов
- 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%
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% (это нереально, по факту меньше. И я уверен, что часть это просто чьи-то древние боты так представляются, собирают какие-то данные).
Браузеры под которые оптимизировать сайты
Chromium (Google Chrome) | WebKit (Safari) | Gecko (Firefox) | Trident (Internet Explorer) | |
---|---|---|---|---|
Яндекс.Радар | 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% пользователей.
Проверка адаптивности сайта
Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.
Очень точный и главное бесплатный сервис, который заслуживает уважение и благодарности от веб-мастеров и верстальщиков, которые занимаются адаптивной версткой сайтов.
Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.
Да, чтобы сделать адаптивный дизайн сайта, нужно хорошо потрудится. Но эти труды вознаградятся благосклонным отношением к вашему сайту поисковиков, и самое главное посетителей вашего сайта.
В современном мире существует множество устройств. В таком многообразии предложений сложно делать выбор. Пользователи стараются выбрать устройство, в котором будут сочетаться наилучшие технические решения. Поэтому при разработке веб-сайтов и сайтов для мобильных устройств важно быть в курсе того, какие размеры и разрешения экранов используются чаще всего. Ведь адаптация сайта упрощает процесс восприятия информации и, в конечном итоге, доставляет удовольствие вашей аудитории.
Самые популярные разрешения экрана
Зная, что при разработке веб-сайтов важно учитывать возможности разных устройств, мы составили список самых современных из них. В нём отражаются и разрешения экранов и показатели окон просмотра.
Самые важные разрешения экрана, при адаптивной верстке
- 320 px — Мобильные устройства (портретная ориентация);
- 480 px — Мобильные устройства (альбомная ориентация);
- 600 px — Небольшие планшеты;
- 768 px — Планшеты (портретная ориентация);
- 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
- 1280 px и более — PC.
Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.
Типы устройств
- Смартфоны - 59.62%
- Десктоп - 37.44%
- Планшеты - 2.94%
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% (Скорее всего это самая реалистичная цифра по остаткам реальных пользователей этого браузера).
Типы устройств
- Смартфоны - 52.02%
- Десктоп - 45.29%
- Планшеты - 2.7%
- 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%
Устройства Android
Разрешение дисплея | Viewport | |
---|---|---|
Телефон | ||
Nexus 6P | 1440 x 2560 | 412 x 732 |
Nexus 5X | 1080 x 1920 | 412 x 732 |
Google Pixel 3 XL | 1440 x 2960 | 412 x 847 |
Google Pixel 3 | 1080 x 2160 | 412 x 824 |
Google Pixel 2 XL | 1440 x 2560 | 412 x 732 |
Google Pixel XL | 1440 x 2560 | 412 x 732 |
Google Pixel | 1080 x 1920 | 412 x 732 |
Samsung Galaxy Note 9 | 1440 x 2960 | 360 x 740 |
Samsung Galaxy Note 5 | 1440 x 2560 | 480 x 853 |
LG G5 | 1440 x 2560 | 480 x 853 |
One Plus 3 | 1080 x 1920 | 480 x 853 |
Samsung Galaxy S9+ | 1440 x 2960 | 360 x 740 |
Samsung Galaxy S9 | 1440 x 2960 | 360 x 740 |
Samsung Galaxy S8+ | 1440 x 2960 | 360 x 740 |
Samsung Galaxy S8 | 1440 x 2960 | 360 x 740 |
Samsung Galaxy S7 Edge | 1440 x 2560 | 360 x 640 |
Samsung Galaxy S7 | 1440 x 2560 | 360 x 640 |
Планшеты | ||
Nexus 9 | 1536 x 2048 | 768 x 1024 |
Nexus 7 (2013) | 1200 x 1920 | 600 x 960 |
Samsung Galaxy Tab 10 | 800 x 1280 | 800 x 1280 |
Chromebook Pixel | 2560 x 1700 | 1280 x 850 |
Узнать стоимость адаптации вашего сайта можете тут → или в форме ниже
Разшерения экранов
- 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%
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%.
Устройства Apple
Разрешение дисплея | Viewport | |
---|---|---|
iPhone | ||
iPhone XR | 828 x 1792 | 414 x 896 |
iPhone XS | 1125 x 2436 | 375 x 812 |
iPhone XS Max | 1242 x 2688 | 414 x 896 |
iPhone X | 1125 x 2436 | 375 x 812 |
iPhone 8 Plus | 1080 x 1920 | 414 x 736 |
iPhone 8 | 750 x 1334 | 375 x 667 |
iPhone 7 Plus | 1080 x 1920 | 414 x 736 |
iPhone 7 | 750 x 1334 | 375 x 667 |
iPhone 6 Plus/6S Plus | 1080 x 1920 | 414 x 736 |
iPhone 6/6S | 750 x 1334 | 375 x 667 |
iPhone 5 | 640 x 1136 | 320 x 568 |
iPod | ||
iPod Touch | 640 x 1136 | 320 x 568 |
iPad | ||
iPad Pro | 2048 x 2732 | 1024 x 1366 |
iPad 3 и 4-го поколения | 1536 x 2048 | 768 x 1024 |
iPad Air 1 и 2 | 1536 x 2048 | 768 x 1024 |
iPad Mini 2 и 3 | 1536 x 2048 | 768 x 1024 |
iPad Mini | 768 x 1024 | 768 x 1024 |
Разшерения экранов
- 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%
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%.
Отзывчивый дизайн
Невозможно разработать стиль и дизайн сайта для каждого устройства. Поэтому для адаптивной вёрстки разработчики часто:
- Группируют стили по типичным размерам экранов для телефонов, планшетов и настольных версий компьютеров. В этом случае на экранах, размеры которых превышают 7 дюймов по диагонали, сайт отображается с разрешением стационарного компьютера.
- Используют контрольные точки. Они определяют ширину дисплея в пикселях. Это значение устройства корректируют в зависимости от размеров экранов.
Иногда разработчики комбинируют оба метода, если считают это необходимым. Мы рекомендуем начать с группировки стилей для типичных размеров устройств.
Если вы разработчик и хотите создать дизайн, удобный для работы с мобильными или адаптивными стилями, ниже мы предлагаем фрагменты кода CSS, которые могут пригодиться. Важно отметить, что эти контрольные точки не подходят для всех сайтов и должны использоваться только в качестве ориентировочного руководства для работы.
/* Стили для десктопа - начало */
@media screen and (max-width: 991px) /* стили для больших планшетов - начало */
@media screen and (max-width: 767px) /* стили для средних планшетов - начало */
@media screen and (max-width: 479px) /* стили для телефонов - начало */
Читайте также: