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

Что такое разрешение экрана телефона

При выборе смартфона или планшета, немало внимания уделяется его дисплею. Кроме сочности картинки, технологии изготовления матрицы, размера и запаса яркости много внимания уделяется его разрешению. Почему на одних устройствах картинка четкая, а на других – состоит из маленьких едва заметных точек? Почему два телефона при одинаковой диагонали могут иметь разные разрешения?

Понятие

Разрешение дисплея, или его разделительная способность указывает на количество точек, из которого состоит изображение на экране. Эти точки называются пикселями – мельчайшими элементами для формирования картинки на дисплее. Чем оно выше, тем более четкая и детализированная картинка.

Разрешение характеризуется количеством пикселей по горизонтали и вертикали, например, значение 1920 × 1080 px говорит о том, что изображение состоит из 1920 точек по горизонтали и 1080 по вертикали. Пиксели имеют преимущественно квадратную форму, но встречаются и круглые.

Все разрешения носят свои названия, порой даже несколько: 1600 × 1200 – UXGA, 1920 × 1080 – 1080p, Full HD или FHD, 3840 × 2160 – 4K или Ultra HD.

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

При рассмотрении десятка смартфонов перед покупкой можно заметить, что габариты их диагонали отличаются и редко выходят за пределы 4,7 – 6 дюймов, а разрешение у большинства 1280 × 720 или 1920 × 1080 px.

Full HD разрешение имеют дисплеи многих мониторов и телевизоров с диагональю до 24 и даже более дюймов. Здесь дело в удельном разрешении и зернистости.

О размерах

4,5 дюймов оптимальным будет Full HD разрешение – 1920 × 1080 px

Удельное разрешение показывает, сколько пикселей помещается на единицу длины – дюйм, реже – сантиметр. При 6-ти дюймах и 24” плотность пикселей на дюйм отличается в 4 раза. Картинка на мониторе будет читаемой на расстоянии в 40-60 см и более, на телефоне – гораздо ближе. Измеряется в ppi.

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

4,5 дюймов оптимальным будет Full HD разрешение – 1920 × 1080 px.

При выборе смартфона не следует вестись на уловки маркетологов: чем больше разделительная способность, тем лучше. Многое зависит от сферы применения устройства. Для мессенджеров, социальных сетей и чтения текста 720p при дисплее до

5,5 дюймов достаточно.

Для экранов с размерами диагонали 6 – 7 дюймов лучше 1080p, если телефон покупается для просмотра кино и игр. QHD, или QuadHD для телефонов не практично, встречается в флагманских моделях.

Чем выше разрешение, тем активнее расходуется заряд аккумулятора – для прорисовки картинки, состоящей из большего числа точек, выполняется больше расчетов. Флагманские смартфоны с разделительной способностью 2560 × 1440 px поддерживают ее понижение до Full HD и ниже.

Формат экрана

Соотношением сторон называется отношение ширины дисплея к его длине. Ранее популярными были устройства с соотношением сторон 16:9, сейчас на рынке большинство смартфонов с пропорциями 18:9 или 2:1. Среди флагманов немало встречается девайсов с очень вытянутыми дисплеями – 21:9.

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

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

Как узнать и поменять

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

При наличии привилегий суперпользователя в Android можно изменить заводские установки дисплея. Для этого понадобится файловый менеджер с возможностью получения root-прав, например, ES Explorer.

  1. Откройте каталог System в корне устройства.
  2. Откройте файл prop через текстовый редактор, предварительно сделав резервную копию.
  3. В строке sf.lcd_density содержится значение плотности пикселей на дюйм. Измените показатель на десяток в одну или иную сторону и перезагрузите смартфон.
  4. Повторите действие несколько раз, пока не добьетесь нужного результата.

Изменять ro.sf.lcd_density на более, чем 10 пунктов за раз не рекомендуется – чревато системными ошибками.

Второй вариант решения проблемы – приложение SecondScreen. Оно позволит изменить разрешение экрана, предотвратить смену его ориентации и содержит прочие функции.

Увидеть текущее разрешение можно в разделе настроек Android, где содержатся данные о системе или дисплее (все зависит от версии операционной системы и оболочки). Рассчитать физические размеры матрицы дисплея мобильного телефона можно при помощи онлайн калькулятора, например, planetcalc.ru.

  1. В первое поле введите длину диагонали в дюймах.
  2. В выпадающем списке ниже укажите стандартное соотношение сторон экрана, если значение для вашего экземпляра присутствует в списке, например, 16:9 или 18:9.
  3. Если его не знаете, выберите «Расчет по введенному соотношению» и задайте разрешение по обеим сторонам (введете сразу ширину или высоту, значения не имеет).
  4. Укажите точность расчета – количество знаков после запятой и жмите «Рассчитать».
Читайте также:  Как остановить резервное копирование whatsapp андроид

Внизу появится таблица с размерами и площадью дисплея в сантиметрах и дюймах. Если не верите, воспользуйтесь линейкой или проверьте корректность введенных данных.

Оптимальное разрешение

На современных смартфонах преобладают следующие разрешения, независимо от размера и соотношения сторон дисплея:

  • HD, 720p – 1280 × 720 px – родная разделительная способность бюджетных устройств с небольшим дисплеем;
  • Full HD, 1920 × 1080 px – у большинства средних по стоимости смартфонов;
  • Quad HD, 2650 × 1440 px – характерно для флагманских телефонов.

Картинка на QHD-дисплеях выглядит еще лучше, но для человеческого глаза эта разница едва ли различима. Для планшетов с большим дисплеем такое разрешение будет оптимальным, для телефона оно излишнее. Немногие приложения и даже оболочки адаптированы под Quad HD.

Источник

Популярные разрешения экранов: основы адаптивной верстки

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

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 991px) <
/* стили для больших планшетов — начало */

@media screen and (max-width: 767px) <
/* стили для средних планшетов — начало */

@media screen and (max-width: 479px) <
/* стили для телефонов — начало */

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

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

Устройства 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 и другие…

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

640×960

1280×800

  • Android: Motorola Xoom, Samsung Galaxy Tab 10.1
  • Windows OS: Asus Eee Pad EP121
  • Apple OS: Axiotron Modbook
Читайте также:  Управление жестами для android

2048×1536

У iPad 3 дисплей Retina при плотности 264 пикселя на дюйм (это даже больше, чем в 15-дюймовых MacBook Pro).

У iPhone 4S — 326 ppi.

One Web

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

Как определить разрешение с помощью CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Серебряной пули нет и не может быть. Только профессиональный дизайн с продуманным размещением каждого элемента по принципу mobile first и качественная верстка обеспечит удобство пользования интернет-магазином.

И второй вопрос: вы не пробовали замерять скорость загрузки сайта? Заодно сравните с конкурентами. И вообще попробуйте зайти с мобильного на свой сайт и сайт конкурента. На каком удобнее находить товар, читать описание и совершать покупку?

Не знаю, кто там в какие заблуждения ввёлся, но в статье всё чётко и по делу, все цифры по разрешениям можно легко проверить. Полезная и актуальная информация, но соглашусь, что данный сайт неплохо было бы подкорректировать на мобильных устройствах, убрать сайдбар, уменьшить шрифт, тогда в том числе и таблицам возможно вовсе и не понадобился бы горизонтальный скролл.
От себя добавлю, что если объединять стили, то лучше писать mobile first, чтобы стили переписывались под ПК или ноут, если потребуется, а на мобильниках грузились по минимуму, т.к. производительность на ПК заметно выше, нежели чем на мобильных устройствах и там это не будет особо критичным.

Источник

Оцените статью