Под какие разрешения мобильных устройств нужно адаптировать сайт

Адаптация сайтов под мобильные устройства

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

Если кратко

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

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

Однозначного ответа нет. Но нужно принимать во внимание, что:

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

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

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

  • 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.
Рекомендуем прочесть  10 полезных советов при создании сайта
320pxiPhone 5портретная ориентация
384pxAndroid (Nexus 4)портретная ориентация
480pxHTC Desire, Nexus One, i9000 Galaxy S и др.
568pxiPhone 5альбомная ориентация
375pxiPhone 6портретная ориентация
667pxальбомная ориентация
414pxiPhone 6 Plumpпортретная ориентация
736pxальбомная ориентация
600pxAndroid (Nexus 4)альбомная ориентация
768px iPadпортретная ориентация
1024px альбомная ориентация
1280px и болееPCпортретная ориентация

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

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

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

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

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 и другие…

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.

<!-- Общие стили для всех устройств -->
<link rel="stylesheet" href="common.css" type="text/css" media="screen" />
<!-- Устройства с шириной от 481px до 1024px -->
<link rel="stylesheet" href="481-1024.css" type="text/css" media="only screen and (min-width:481px) and (max-width:1024px)" />
<!-- С шириной экрана меньшей или равной 480px -->
<link rel="stylesheet" href="max-480.css" type="text/css" media="only screen and (max-width:480px)" />

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

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

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

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

  • responsinator.com

Понравилась статья? Поделить с друзьями:
  • http://- alex

    Насколько актуальна эта информация? Хотелось бы узнать современную статистику (по 2015г) по разрешениям мобильных устройств

    • http://www.fortress-design.com fortresseo

      Информация вполне актуальна.

  • Никита

    Уважаемый, не вводите людей в заблуждение.

    Вообще-то, в вебе разрешения экранов мобильников отличается от заявленного производителем, например, для верстки под iPhone4 нужно прописывать в медиаквери 320х480, а для большинства андройдов на 5′ — 360х640.

    По факту, телефон может быть FullHD, а в вебе — 360х640 (пример — Google Nexus 5). Под 6-й iPhone вообще верстать приходится отдельно, так как у него в вебе разрешение — 375х667.

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

  • http://vk.com/id301178147 Слава Андриянов

    В наше время люди всё больше и больше стали отдавать предпочтение мобильному устройству, нежели персональному компьютеру. Поэтому для более удобной работы в интернете нужно адаптировать свои сайты для мобильных устройств. Всё сразу становится гораздо проще. Не нужно менять масштабирование, ориентацию и т.п. Иногда можно встретить довольно печальную картину — сайты на мобильном устройстве теряют свой дизайн, теряют удобство и привычное оформление, нежели при просмотре на персональном компьютере. В любом случае, адаптировать свой сайт можно на http://www.mobile-version.ru/ , низкая цена, быстрота выполнение работы и качество гарантированы.

  • fortress-design

    Спасибо за обратную связь. Верстку поправим.