Популярные разрешения мобильных устройств
Опубликовано: 01.09.2018
С каждым годом трафик с мобильных устройств растет и со временем превысит его. Поэтому до сборки сайта нужно подумать о представлении контента таким образом, чтобы он был ориентирован и на мобильную аудиторию. Одним из требованием в ТЗ на разработку сайта является адаптивный дизайн под разные типы устройств (смартфоны, планшеты, десктопные мониторы). Для проектирования нового сайта опираются на общую статистику разрешений экрана наиболее популярных устройств.
Если кратко
Дизайн с резиновой версткой при минимальной ширине в 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 и более×бесконечность — планшеты и десктопБазовая ширина экранов разных устройств
320 px — Мобильные устройства (портретная ориентация); 480 px — Мобильные устройства (альбомная ориентация); 600 px — Небольшие планшеты; 768 px — Планшеты (портретная ориентация); 1024 px — Планшеты (альбомная ориентация)/Нетбуки; 1280 px и более — PC. (Сейчас распространенное разрешение на ноутбуке 1366px. Есть и больше, как ПК, но редко встречаются).| 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) простота навигации (перейти на страницу всего в три нажатия, скроллинг должен быть вертикальным, а не горизонтальным, неплохо добавить кнопки переходов в самый верх страницы и на главную страницу сайта – это значительно повысит уровень удобства использования, обязательное наличие поиска по сайту.
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 Touch2320×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 Modbook2048×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) { /* Стили для данного устройства */ }