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

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

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

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

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

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

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

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

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

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

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

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

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

}

}

}

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

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

Устройства Apple

Устройства Android

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

С каждым годом трафик с мобильных устройств растет и со временем превысит его. Поэтому до сборки сайта нужно подумать о представлении контента таким образом, чтобы он был ориентирован и на мобильную аудиторию. Одним из требований в ТЗ на разработку сайта является адаптивный дизайн под разные типы устройств (смартфоны, планшеты, десктопные мониторы). Для проектирования нового сайта опираются на общую статистику разрешений экрана наиболее популярных устройств.

Если кратко

Дизайн с резиновой версткой при минимальной ширине в 320 пикселей с элементами достаточно большими для удобного нажатия кончиками пальцев — наилучший вариант реализации мобильного веб-сайта.

Под какие устройства и разрешения экранов оптимизировать сайт

Однозначного ответа нет. Нужно смотреть с каких устройств на сайт заходит целевая аудитория. Но нужно принимать во внимание, что:

• Наиболее распространенный формат Андроид — 480×800 (hpdi), он соответствует всем смартфонам Samsung и большинству популярных Nokia.
• Второй по популярности формат — mdpi, 320×480
• Большинство смартфонов оснащены тач-скрином.

Макет сайта должен быть сделан в Фотошопе (или в таких программах как Figma). Обязательно должны быть адаптивные макеты. Каждая страница в базовых разрешениях.

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

• 320×480 px — iPhone5
• 480×800 — HTC Desire, Nexus One, i9000 Galaxy S и другие
• 768×1024 — iPad
• 640×960 — iPhone 4
• 1000 и более×бесконечность — планшеты и десктоп

Статья по теме:  В Вордпресс не работает кнопка добавить файл и многое другое

Базовая ширина экранов разных устройств

1. 320 px — Мобильные устройства (портретная ориентация);
2. 480 px — Мобильные устройства (альбомная ориентация);
3. 600 px — Небольшие планшеты;
4. 768 px — Планшеты (портретная ориентация);
5. 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
6. 1280 px и более — PC. (Сейчас распространенное разрешение на ноутбуке 1366 px. Есть и больше, как ПК, но редко встречаются).

Какие факторы учитывать

Оптимизация должна учитывать следующие факторы, влияющие на удобство взаимодействия с сайтом:

• тип клавиатуры (физическая, тачскрин)
• разрешение и соотношение сторон экрана
• поддержка изменения ориентации экрана
• скорость передачи данных (2G, 3G, 4G)
• операционная система
• возможности браузера (масштабирование, поддержка Flash и AJAX)
• простота навигации (перейти на страницу всего в три нажатия, скроллинг должен быть вертикальным, а не горизонтальным, неплохо добавить кнопки переходов в самый верх страницы и на главную страницу сайта – это значительно повысит уровень удобства использования, обязательное наличие поиска по сайту.

Разрешения экранов мобильных устройств

240×320

• Nokia 6300, Nokia N92, Nokia N95, Nokia N95 8GB, Nokia N96
• Sony Ericsson W850i & W890i, Sony Ericsson W880i
• Apple iPod Nano 3rd & 4th generation
• HTC Wizard, HTC Tattoo, HTC Touch2

320×240

• Blackberry: Curve 8530, Pearl Flip
• Android: Motorola Charm, Sony Ericsson Xperia X10 Mini и другие
• Symbian OS: Nokia E63 и другие

320×480

• Apple OS: iPhone, iPod
• Android: HTC Dream, HTC Hero, HTC Magic, HTC Wildfire S, Droid Pro, i7500 Galaxy, Samsung Galaxy Ace (S5830), Samsung Moment, Samsung Galaxy Gio GT-S5660, Sony Ericsson Live With Walkman и другие…

Статья по теме:  Декларация !important в CSS

480×360

Blackberry: Torch, Storm, Bold

360×640

Symbian OS: Nokia N8, Nokia C6-01 и другие

480×800

• Android: Liquid A1, HTC Desire, Nexus One, i9000 Galaxy S и другие
• Maemo (Linux): Nokia 900 и другие
• Windows Mobile 6: Sharp S01SH
• Windows 7 Phone Venue Pro, Samsung Omnia 7, HTC 7 Pro и другие

768×1024

iPad

640×960

iPhone 4

1280×800

• Android: Motorola Xoom, Samsung Galaxy Tab 10.1
• Windows OS: Asus Eee Pad EP121
• Apple OS: Axiotron Modbook

2048×1536

У iPad 3 дисплей Retina при плотности 264 пикселя на дюйм (это даже больше, чем в 15-дюймовых MacBook Pro).

У iPhone 4S — 326 ppi.

One Web

Учитывая большое количество разрешений, правильным решением было бы реализация проекта «One Web». One Web — означает создание, насколько это возможно, одинаковых условий для использования и отображения информации на всех устройствах. Но это не означает, что одна и та же информация будет выглядеть абсолютно одинаково на разных устройствах.

Как определить разрешение с помощью CSS

Определить ширину экрана, положение и соотношение сторон с помощью media-запросов, которые появились в CSS3.

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

Чтобы сократить количество запросов, можно использовать один файл таблиц стилей.

/* Устройства с экранами от 480px до 1024px */ @media screen and (min-width:481px) and (max-width:1024px) { /* Стили для данного устройства */ } /* Устройства с шириной экрана 480px и ниже */ @media screen and (max-width:480px) { /* Стили для данного устройства */ } 

Сервис для проверки адаптивности

• responsinator.com

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

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

В последние годы все флагманские устройства на Android OS имели разрешение Full HD (1080х1920) и QHD (1440х2560). В 2017 году на рынке появились несколько устройств с нестандартными разрешениями — в основном благодаря новому тренду на экраны edge-to-edge (на всю ширину устройства). В том числе:

• Samsung Galaxy Note 8: 1440 x 2960 пикселей
• Samsung Galaxy S8: 1440 x 2960 пикселей
• LG V30: 1440 x 2880 пикселей
• LG G6: 1440 x 2880 пикселей
• Sony Xperia XZ Premium: 3840 x 2160 пикселей
• iPhone X: 1125 x 2436 пикселей (только анонсирован)

Конечно, эти нестандартные разрешения ещё не вошли в нашу статистику. Но, так или иначе, мы можем ожидать, что стандарт S8 может стать одним из самых популярных в списке из-за огромной популярности семейства Galaxy S: так, предыдущий флагман — S7 — стал самым распространённым устройством на Android в мире.

Самое используемое разрешение экрана смартфона — 720х1280

По данным статистики трафика за июль-август 2017 года, самым популярным разрешением экрана на смартфонах стало соотношение 720×1280 пикселей, которое используется на большинстве устройств среднего и бюджетного класса. Это самое используемое разрешение в 11 странах из 20 проанализированных, в том числе в Индии, Италии и Испании. С небольшим отрывом за ним следует соотношение 750х1334, которое используется в популярных в США, Великобритании и Австралии моделях iPhone. Во Франции и Германии, в свою очередь, самым частым разрешением стало Full HD в смартфонах среднего и бюджетного классов.

В таблице представлены самые ходовые разрешения экранов смартфонов во всех 20 странах, участвовавших в исследовании.

На графиках ниже показана доля трафика, которая пришлась на долю смартфонов с разрешением экрана 720х1280 в июле-августе 2017 года в участвовавших в исследовании странах.

Full HD завоёвывает рынок, распространение QHD замедляется

Также мы проанализировали, насколько быстро выросло использование нескольких популярных разрешений за год — с 4 квартала 2016 года по 3 квартал 2017 года. Несмотря на активный рост ранее, сейчас распространение разрешения QHD (1440×2560) замедлилось.

Во Франции, Индии, Нигерии и США устройства с QHD даже потеряли долю рынка (-4% в последней стране). За последние 4 квартала устройства с FHD (1080×1920) выросли быстрее, прибавив 5-10% в Бразилии, Франции, Японии, Польше, Испании и США.

Доля трафика Full HD-устройств (1080х1920) за последние 4 квартала:

Доля трафика QHD-устройств (1440х2560) за последние 4 квартала: