Содержание
- 1 Размер экрана, разрешение и область просмотра: что это значит?
- 2 Отзывчивый дизайн
- 3 Самые популярные разрешения экрана
- 3.1 Устройства Apple
- 3.2 Устройства Andro > Разрешение дисплея 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
В современном мире существует множество устройств. В таком многообразии предложений сложно делать выбор. Пользователи стараются выбрать устройство, в котором будут сочетаться наилучшие технические решения. Поэтому при разработке веб-сайтов и сайтов для мобильных устройств важно быть в курсе того, какие размеры и разрешения экранов используются чаще всего. Ведь адаптация сайта упрощает процесс восприятия информации и, в конечном итоге, доставляет удовольствие вашей аудитории.
Размер экрана, разрешение и область просмотра: что это значит?
Зачем используется адаптивная вёрстка? Когда вы покупаете устройство, в спецификации вы можете наблюдать такие параметры как размер экрана и его разрешение. Размер экрана — это показатель длины его диагонали в дюймах. Не следует путать его с разрешением дисплея. Этот параметр показывает количество пикселей на экране. Часто он отображается, как количество пикселей по экранной ширине и высоте (например, 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 |
Устройства Andro >
Разрешение дисплея
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
Узнать стоимость адаптации вашего сайта можете тут → или в форме ниже
В нашем случае вопрос звучит так: под какое разрешение экрана разрабатывать сайт, если он не адаптивный? То есть вопрос у нас заключается в том, какое наиболее популярное разрешение экрана на текущий момент и какую долю мы «потеряем», отказавшись от меньших размеров?
Для этого обратимся к данным от аналитической компании StatCounter и аналогичному срезу из сервиса LiveInternet.
Из графиков видно, что многолетний стандарт 1024×768 теперь существенно уступил позиции в рейтинге популярности. На первом месте разрешение в 1366×768 (по разным оценкам его доля колеблется от 13 до 19 процентов). На втором месте среди десктопов находится расширение 1920×1080.
Наиболее популярный вариант среди переносных устройств в России: 640×480, но общее количество вариаций разрешений существенно увеличилось, по сравнению с 2013-2014 годами. На текущий момент не существует ни одного разрешения экрана, которое бы имело долю более 20% аудитории.