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

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

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

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

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

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

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

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

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

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

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

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

}

}

}

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

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

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

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

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

Если кратко

Дизайн с резиновой версткой при минимальной ширине в 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. Есть и больше, как ПК, но редко встречаются).
320px iPhone 5 портретная ориентация
384px Android (Nexus 4) портретная ориентация
480px HTC Desire, Nexus One, i9000 Galaxy S и др.
568px iPhone 5 альбомная ориентация
375px iPhone 6 портретная ориентация
667px альбомная ориентация
414px iPhone 6 Plump портретная ориентация
736px альбомная ориентация
600px Android (Nexus 4) альбомная ориентация
768px iPad портретная ориентация
1024px альбомная ориентация
1280px и более PC портретная ориентация

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

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

  • тип клавиатуры (физическая, тачскрин)
  • разрешение и соотношение сторон экрана
  • поддержка изменения ориентации экрана
  • скорость передачи данных (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

31.8%

Австралия

750×1334

32%

Бразилия

720×1280

31.6%

Канада

750×1334

28.1%

Колумбия

720×1280

29.2%

Египет

720×1280

29.7%

Франция

1080×1920

29%

Германия

1080×1920

22.1%

Индия

720×1280

38.5%

Италия

720×1280

24.1%

Япония

750×1334

38.9%

Малайзия

720×1280

28.5%

Нигерия

720×1280

30.4%

Польша

720×1280

30.4%

Россия

1440×2560

18.5%

ЮАР

720×1280

22%

Испания

720×1280

28.6%

Швеция

750×1334

30%

Англия

750×1334

29.2%

США

750×1334

30.7%

На графиках ниже показана доля трафика, которая пришлась на долю смартфонов с разрешением экрана 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 квартала:

ОСТАВЬТЕ ОТВЕТ

Войти с помощью: 
Please enter your name here
Please enter your comment!