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

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

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

Зачем используется адаптивная вёрстка? Когда вы покупаете устройство, в спецификации вы можете наблюдать такие параметры как размер экрана и его разрешение. Размер экрана - это показатель длины его диагонали в дюймах. Не следует путать его с разрешением дисплея. Этот параметр показывает количество пикселей на экране. Часто он отображается, как количество пикселей по экранной ширине и высоте (например, 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

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

Материалы по теме