Разрешение экрана iphone x для верстки

Популярные разрешения экранов: основы адаптивной верстки

В современном мире существует множество устройств. В таком многообразии предложений сложно делать выбор. Пользователи стараются выбрать устройство, в котором будут сочетаться наилучшие технические решения. Поэтому при разработке веб-сайтов и сайтов для мобильных устройств важно быть в курсе того, какие размеры и разрешения экранов используются чаще всего. Ведь адаптация сайта упрощает процесс восприятия информации и, в конечном итоге, доставляет удовольствие вашей аудитории.

Размер экрана, разрешение и область просмотра: что это значит?

Зачем используется адаптивная вёрстка? Когда вы покупаете устройство, в спецификации вы можете наблюдать такие параметры как размер экрана и его разрешение. Размер экрана — это показатель длины его диагонали в дюймах. Не следует путать его с разрешением дисплея. Этот параметр показывает количество пикселей на экране. Часто он отображается, как количество пикселей по экранной ширине и высоте (например, 1024 × 768).

Устройства с одинаковыми размерами экранов могут иметь разные разрешения. Поэтому разработчики используют окна просмотра при создании страниц, удобных для мобильных устройств. Окна просмотра — это уменьшенные версии, которые позволяют последовательно просматривать сайты на всех устройствах. Окна просмотра часто стандартизированы для меньших размеров разрешения.

Дисплеи настольных компьютеров и ноутбуков всегда находятся в горизонтальной ориентации (ширина больше, чем высота). Мобильные устройства можно поворачивать, чтобы показывать веб-сайты как в альбомной, так и в портретной (высота больше, чем ширина) ориентациях. Это означает, что дизайнеры и разработчики должны учитывать не только размеры экранов для адаптивной верстки, но и эти различия.

Нужна помощь в определении того, удобен ли ваш сайт для просмотра на разных мобильных устройствах? Воспользуйтесь нашим сервисом →.

Отзывчивый дизайн

Невозможно разработать стиль и дизайн сайта для каждого устройства. Поэтому для адаптивной вёрстки разработчики часто:

• Группируют стили по типичным размерам экранов для телефонов, планшетов и настольных версий компьютеров. В этом случае на экранах, размеры которых превышают 7 дюймов по диагонали, сайт отображается с разрешением стационарного компьютера.
• Используют контрольные точки. Они определяют ширину дисплея в пикселях. Это значение устройства корректируют в зависимости от размеров экранов.

Иногда разработчики комбинируют оба метода, если считают это необходимым. Мы рекомендуем начать с группировки стилей для типичных размеров устройств.

Если вы разработчик и хотите создать дизайн, удобный для работы с мобильными или адаптивными стилями, ниже мы предлагаем фрагменты кода CSS, которые могут пригодиться. Важно отметить, что эти контрольные точки не подходят для всех сайтов и должны использоваться только в качестве ориентировочного руководства для работы.

/* Стили для десктопа — начало */

@media screen and (max-width: 991px) <
/* стили для больших планшетов — начало */

@media screen and (max-width: 767px) <
/* стили для средних планшетов — начало */

@media screen and (max-width: 479px) <
/* стили для телефонов — начало */

Самые популярные разрешения экрана

Зная, что при разработке веб-сайтов важно учитывать возможности разных устройств, мы составили список самых современных из них. В нём отражаются и разрешения экранов и показатели окон просмотра.

Устройства 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

Устройства 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

Узнать стоимость адаптации вашего сайта можете тут → или в форме ниже

Источник

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

Сегодня мы проведём исследование на предмет современных тенденций разрешений экранов устройств и используемых браузеров на начало 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% (Скорее всего это самая реалистичная цифра по остаткам реальных пользователей этого браузера).

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

• 800×600 — 27.1%
• 1024×768 — 21.0%
• 640×480 — 14.8%
• 1920×1080 — 8.7%
• 1366×768 — 8.7%
• 1600×1200 — 5.0%
• 1280×800 — 2.8%
• 1280×1024 — 2.3%
• 1440×900 — 1.5%
• 1152×864 — 1.0%
• 1680×1050 — 0.8%
• 240×320 — 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%.

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

• 360×640 — 12.29%
• 1366×768 — 12.29%
• 1920×1080 — 12.01%
• 375×667 — 4.47%
• 393×851 — 3.99%
• 360×780 — 3.78%
• 360×720 — 3.74%
• 1536×864 — 3.58%
• 1280×1024 — 3.50%
• 1024×768 — 3.41%
• 414×896 — 2.78%
• 360×760 — 2.76%
• 1600×900 — 2.51%
• 768×1024 — 2.41%
• 412×892 — 2.04%
• 375×812 — 1.97%
• 800×600 — 1.83%
• 1280×800 — 1.78%
• 320×568 — 1.77%
• 1440×900 — 1.69%
• 412×915 — 1.48%
• 1280×720 — 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% (это нереально, по факту меньше. И я уверен, что часть это просто чьи-то древние боты так представляются, собирают какие-то данные).

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

• 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%

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

Выборка 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%
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) в статистике не видно, да и на таких расширениях экран скорее всего поделён на два, браузер в сложенном виде будет, а не на весь экран.

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% смартфонно-планшетного парка, плюс разные расширения типа 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 год:

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

Послесловие

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

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

Страница сгенерирована за 0.005596 секунды На один процесс веб-сервера: 179 стр./сек. Всего Apache может отдать: 45 824 стр./сек. Выделено php памяти: 443.64 KB, real_usage: 2 MB © Все права защищены 2004 — 2021

Карта сайта Отслеживать изменения в Твиттере Политика конфиденциальности

Браузер построил за сек. Полное время сек. Источник Оцените статью Вам также может понравиться 10 самых популярных гаджетов Apple в истории Во введении стоит отметить, что компания Apple уже Путешествие в будущее: как гаджеты Apple меняют нашу жизнь Введение Технологии развиваются с невероятной скоростью 5 главных причин перейти на гаджеты Apple: обзор и сравнение Введение: Apple является одной из самых известных и Секреты кастомизации гаджетов Apple: советы и хитрости Кастомизация гаджетов Apple – это процесс изменения Правообладателям Политика конфиденциальности Контакты