🌟 atbliss.ru

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

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

mama_mia / Shutterstock.com

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

Если кратко

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

Размеры экранов для адаптивной верстки

Разработчики ориентируются не на конкретные размеры страницы при адаптивной верстке, а на брейкпоинты — контрольные точки, при достижении которых меняется дизайн и соотношение элементов. «Каноническими» считаются следующие размеры дисплея для разных устройств:


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

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

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

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

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

  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 портретная ориентация

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

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

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

240x320

320x240

320x480

480x360

Blackberry: Torch, Storm, Bold

360x640

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

480x800

768x1024

iPad

640x960

iPhone 4

1280x800

2048x1536

У 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) {
/* Стили для данного устройства */
}

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


Перейти к верхней панели