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

С каждым годом трафик с мобильных устройств растет и со временем превысит его.

Поэтому до сборки сайта нужно подумать о представлении контента таким образом, чтобы он был ориентирован и на мобильную аудиторию.

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

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

mama_mia / Shutterstock.com

Если кратко

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

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

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

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

Разрешение Устройства
240×320
  • Nokia 6300, Sony Ericsson W850i & W890i, Nokia N95, Apple iPod Nano 3rd & 4th generation,Sony Ericsson W880i,  Nokia N92, Nokia N95 8GB, Nokia N96, 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

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

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

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

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

Я думаю, что дизайн нужно адаптировать под такие разрешения:

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

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

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

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

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

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

<code>/* Устройства с экранами от 480px до 1024px */</code>
<code>@media screen and (min-width:481px) and (max-width:1024px) {</code>
<code>/* Стили для данного устройства */</code>
<code>}</code>
<code>/* Устройства с шириной экрана 480px и ниже */</code>
<code>@media screen and (max-width:480px) {</code>
<code>/* Стили для данного устройства */</code>
<code>}</code>
  • 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/ , низкая цена, быстрота выполнение работы и качество гарантированы.