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

Самые популярные разрешения экранов смартфонов в 2017 году

По материалам сайта Deviceatlas

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

Новые разрешения экранов на рынке

В последние годы все флагманские устройства на Android OS имели разрешение Full HD (1080х1920) и QHD (1440х2560). В 2017 году на рынке появились несколько устройств с нестандартными разрешениями — в основном благодаря новому тренду на экраны edge-to-edge (на всю ширину устройства). В том числе:

• Samsung Galaxy Note 8: 1440 x 2960 пикселей
• Samsung Galaxy S8: 1440 x 2960 пикселей
• LG V30: 1440 x 2880 пикселей
• LG G6: 1440 x 2880 пикселей
• Sony Xperia XZ Premium: 3840 x 2160 пикселей
• iPhone X: 1125 x 2436 пикселей (только анонсирован)

Конечно, эти нестандартные разрешения ещё не вошли в нашу статистику. Но, так или иначе, мы можем ожидать, что стандарт S8 может стать одним из самых популярных в списке из-за огромной популярности семейства Galaxy S: так, предыдущий флагман — S7 — стал самым распространённым устройством на Android в мире.

Самое используемое разрешение экрана смартфона — 720х1280

По данным статистики трафика за июль-август 2017 года, самым популярным разрешением экрана на смартфонах стало соотношение 720×1280 пикселей, которое используется на большинстве устройств среднего и бюджетного класса. Это самое используемое разрешение в 11 странах из 20 проанализированных, в том числе в Индии, Италии и Испании. С небольшим отрывом за ним следует соотношение 750х1334, которое используется в популярных в США, Великобритании и Австралии моделях iPhone. Во Франции и Германии, в свою очередь, самым частым разрешением стало Full HD в смартфонах среднего и бюджетного классов.

В таблице представлены самые ходовые разрешения экранов смартфонов во всех 20 странах, участвовавших в исследовании.

 

Страна	Разрешение	Доля
Аргентина	720×1280	31.8%
Австралия	750×1334	32%
Бразилия	720×1280	31.6%
Канада	750×1334	28.1%
Колумбия	720×1280	29.2%
Египет	720×1280	29.7%
Франция	1080×1920	29%
Германия	1080×1920	22.1%
Индия	720×1280	38.5%
Италия	720×1280	24.1%
Япония	750×1334	38.9%
Малайзия	720×1280	28.5%
Нигерия	720×1280	30.4%
Польша	720×1280	30.4%
Россия	1440×2560	18.5%
ЮАР	720×1280	22%
Испания	720×1280	28.6%
Швеция	750×1334	30%
Англия	750×1334	29.2%
США	750×1334	30.7%

 

На графиках ниже показана доля трафика, которая пришлась на долю смартфонов с разрешением экрана 720х1280 в июле-августе 2017 года в участвовавших в исследовании странах.

 

Full HD завоёвывает рынок, распространение QHD замедляется

Также мы проанализировали, насколько быстро выросло использование нескольких популярных разрешений за год — с 4 квартала 2016 года по 3 квартал 2017 года. Несмотря на активный рост ранее, сейчас распространение разрешения QHD (1440×2560) замедлилось.

Во Франции, Индии, Нигерии и США устройства с QHD даже потеряли долю рынка (-4% в последней стране). За последние 4 квартала устройства с FHD (1080×1920) выросли быстрее, прибавив 5-10% в Бразилии, Франции, Японии, Польше, Испании и США.

Доля трафика Full HD-устройств (1080х1920) за последние 4 квартала:

 

 

Доля трафика QHD-устройств (1440х2560) за последние 4 квартала:

 

Что нужно знать дизайнеру о мобильных устройствах

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

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

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

Речь идет об устройствах на Android и iOS, WP пока экзотика, и без опыта личного обращения я не возьмусь давать рекомендации.

Отображение неадаптированной страницы в мобильном браузере

Если в HTML документе отсутствуют метатеги, говорящие мобильному браузеру что-либо о том, в какой ширине отображать документ, то браузеры будут вести себя так, как будто ширина документа 980 пикселов. Это справедливо как для телефонов с шириной экрана в 320 пикселов, так и для 10-дюймовых таблеток, использующих Android и iOS и браузер на Webkit. Такой подход подразумевает, что сайты с минимальной шириной в 960 пикселов получат небольшие поля для удобства восприятия контента.

Если же минимальная ширина документа больше, то поведение браузеров начинает различаться. Safari в iPhone/iPad в большинстве случаев просто сожмет контент. В Android проявят себя DIP — density-independent pixels, подробнее о которых позже. Если ширина документа больше 980 и больше, чем ширина устройства в DIP, появится прокрутка право. Так, сайт с шириной содержимого в 1040 пикселов будет отображаться без горизонтальной прокрутки на iPhone и IPad (1024 пикселов), но с прокруткой на телефонах вроде galaxy S3 (физическое разрешение 1280х720) или планшете Nexus 7 (физическое разрешение 1280х800).

Какие стоит сделать выводы? Несмотря на обилие широкоформатных дисплеев в настольных ПК и ноутбуках, старая добрая сетка на 960 пикселов не утратила свою актуальность. Мобильные браузеры имеют так же свойство подгонять текстовые блоки в формат, удобно читаемый на устройстве, например, поджимать текст в узкий столбец на телефоне и увеличивать его шрифт. Это не получится, если содержащий блок текст жестко ограничен по высоте. На самом деле, вообще никогда не стоит делать сайт, где что-либо ограничено по высоте, особенно если планируются посетители с мобильных устройств. Еще один враг мобильных устройств, особенно — телефонов — это элементы с position: fixed. Например, модная ныне кнопка назад, настойчиво бегающая за пользователем по странице. Еще хуже — большие плашки, вроде фиксированной шапки. Такие элементы не только занимают полезную площадь на малом экране, но и остаются на прежнем месте при увеличении. Проблема характерна также для модальных окон. Если они отображаются посередине экрана, то с мобильника увеличение их содержимого требует изрядной ловкости. Использование попапов вроде “будь на связи с нами в социальных сетях!”, ведущих себя подобным образом — вообще лютое неуважение к пользователям мобильных устройств, потому что зачастую покинуть сайт проще, чем закрыть этот попап.

Рассмотрим на примере парочки сайтов.

Не смотря на то, что лента.ру имеет очень пристойную мобильную версию, автоматический переход на нее не производится. В настольной fixed-меню залезает на текст при автоматическом масштабировании. Перед пользователем встает выбор либо масштабировать руками, либо не полениться прописать m. в url.

РБК. Вообще у них тоже есть мобильная версия, но переход на нее осуществляется только с главной страницы. По прямой ссылке (из Google News, в частности) можно наблюдать это нечитабельное полотно. Задержится ли посетитель на таком сайте? Едва ли.

Суперканонический поехавший попап на РБК-стайл. Выдающийся пример того, как делать не надо.

Интан, который верстал угадайте кто. Я, разумеется, прекрасно понимал, почему нельзя так поступать с меню, но как-то не было настроения спорить. Задать вопрос вообще не в тему.

Еще одна штука, которая обычно не оправдывает затраты времени в настольном виде и вызывает проблемы в мобильном — это кастомные элементы форм. То, что средствами CSS они почти не настраиваются, получилось не просто потому, что консорциуму всемирной паутины было лень.

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

А возможность прикрепить файл в iOS отсутствует как таковая. И если стандартный вид кнопки намекнет пользователю, что она отключена, то какая-нибудь яркая красивая кнопка будет вызывать ощущение того, что на вашем сайте что-то не работает.

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

Еще одной неприятной особенностью мобильных браузеров является то, что в настоящее время они не кешируют подключаемые шрифты. Тот же PT Sans во всех начертаниях, подключенный с Google Web Fonts, грузится ощутимо долго. При этом едва ли он так уж ощутимо проигрывает встроенным Helvetica / Roboto. Хорошо подумайте, стоит ли лишнее время загрузки вашего кастомного шрифта.

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

В iPhone и iPad используется понятие точек — apple points. Разрешение iPhone вплоть до 5 модели — 320 на 480 точек. Что такое Retina Display? Retina Display использует двойную плотность пикселов, то есть на одну точкку приходится 4 физических пиксела. Так, у iPhone 4 при физическом разрешении экрана 640 на 960 пикселовв все же же 320 на 480 точек. Но при этом графика более детализирована за счет использования вдвое больших изображений в приложениях. Для iPhone 5 значение в точках увеличилось с 480 до 568. У iPad всех версий, включая Mini, оно неизменно — 1024х768.

По умолчанию в масштабе 1 к 1 стандартная графика в web (например, background-image) будет отображена в как-бы увеличенном вдвое виде, на 4 пиксела физического экрана будет растянут один пиксел растрового изображения. Как использовать графику высокого разрешения в такой ситуации мы рассмотрим в следующем разделе. Главное, что нужно помнить о разрешениях iOS устройств — не надо думать, что страницы в ретине и не-ретине имеют разную ширину. Нет, разница только в плотности пикселов, пропорции абсолютно те же.

В Android ситуация гораздо сложнее, точнее, многообразнее. В Android используется понятие different screen densities (DPI). Суть его в том, что при разных физических размерах дисплея и разрешающей способности, модель поведения по точкам отличается в зависимости от назначения устройства. аналогом Points служит вышеупомянутый DIP.

Плотность экрана — 1. В эту категорию входит множество устройств, такие как телефоны 320х480 (HTC Hero, LG Optimus One), 7-дюймовые таблетки 1024х600 (Samsung Galaxy Tab, Kindle Fire), 10-дюймовые таблетки (Asus Transformer, Acer A500, Galaxy Tab 10’1).

Плотность экрана 1,33 используется в 7-ми дюймовых планшетах вроде Nexus 7. Физическое разрешение — 1280х800, в DIP — 960х600.

Плотность экрана 1,5 — мобильные телефоны высокой ценовой категории 2011 года и средней 2012 года, 10-ти дюймовые планшеты с FullHD. Например, Nexus One 480×800 пикселов, 360х533* DIP, HTC One S — 540х960 пикселов, 360х640 DIP, и Asus Transformer Pad Infinity 1920×1200 пикселов, 1280х800 DIP.

*на Android Developers встречается 534, но измерение ширины браузера через JS показывает именно 533, соответственно и в медиазапросах стоит ориентироваться на эту цифру.

Плотность экрана 2 — телефоны высокой ценовой категории 2012 года и буквально пара планшетов. Например, HTC One X, Samsung Galaxy S3 — разрешение экрана 1280х720, размеры в DIP 360х640. Планшет Google Nexus 10 — разрешение 2560х1600 пикселов, 1280х800 DIP.

Плотность экрана 3 — флагманы 2013 года с FullHD дисплеем. При разрешении в 1920х1080 пикселов у них все те же 360х640 DIP.

При всем этом есть еще выбивающийся из колеи Google Nexus 4 c экраном в 1280х768 пикселов с плотностью 2 (384х640). В моделях с экранными клавишами 42DIP занимает панель для них, поэтому в моделях такого рода (Galaxy Nexus, Nexus 4, Sony Xperia Z) в портретном режиме портретное разрешение будет несколько меньше, и составит 598 точек.

Таким образом, у нас есть три разрешения для портрета — 320, 460 и редкое 384, и четыре c половиной ландшафтных — 480, 533, 568, 640 (598 с софт-клавишами).

У планшетов это портретные 600 и 800, и ландшафтные 960, 1024 и 1280.

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

Как начать работу над макетом мобильного приложения?

Для начала, читайте гайдлайны. Приложения под разные платформы должны выглядеть по-разному. Вот, например, пройдя по ссылке можно сравнить типовые элементы различных ОС

Для работы над макетом приложения для iPhone создайте холст 640×1136 (960) и используйте размеры, кратные двум. Вся графика, все шрифты должны быть таковыми.

Определенную часть экрана в вашем будущем приложении могут занимать status bar с индикаторами сигнала, батареи и т.д. Это 20 точек в iOS и 25 DIP в Android. В Android телефонах с soft-клавишами и планшетах 48 DIP внизу экрана занимает плашка под них (Navigation Bar). При этом в неканоничных устройствах вроде планшетов Samsung из-за использования фирменной оболочки Navigation Bar и Status Bar совмещены.

Для приложения под телефоны на Android актуально брать хост не меньше 720х1280. Лучше сразу 1080х1960, в расчете на современные флагманы.

Для холста в 720х1280 размеры так же должны быть кратны двум, для 1080х1960 кратно трем. Использовать в качестве холста 480х800 или 640х960 — очень плохая идея.

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

Использовав макет неподходящих размеров, вина за кривой вид приложения или его замыленную графику окажется полностью на вас.

В общем, будьте внимательны к деталям и помните — пикселы и точки/дипы — уже не одно и то же.

Оптимизация Web-графики для экранов высокой плотности

Итак, мы узнали о том, что существует несколько возможных вариантов плотности пикселов на дисплее. Соответственно, для избежания эффекта замыленной графики, так же известной как «эффект Playstation», нам необходимо либо использовать растровую графику большего разрешения, либо векторную графику, например, SVG.

При этом поддержка SVG пока весьма ограничена, и для обратной совместимости со старыми браузерами все равно придется использовать растр. Другой головной болью будет использование спрайтов — значения background-position нужно будет указывать в процентах, что потребует больших математических вычислений. Наименее сложным путем является использование нескольких вариантов одних и тех же изображений, через медиа-запрос, например -webkit-min-device-pixel-ratio: 2.

Как можно заметить, методика сама по себе очень простая и требует всего лишь наличие нескольких версий одной и той же картинки, если она использована в качестве background-image. Обычные же изображения при необходимости можно загружать вдвое большего, чем они должны быть размера и прописывать нужный на странице размер через атрибут style.

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

Голосов: 681 | Просмотров: 16061

об эволюции разрешений дисплеев Android-смартфонов — android.mobile-review.com

28 мая 2014

Илья Субботин

Facebook

Twitter

Вконтакте

Google+

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

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

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

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

QVGA (240×320)
HVGA (320X480)
WVGA (480×800)
qHD (540×960)
HD (1280×720)
FHD (1920×1080)
QHD (2560×1440)
WXGA (1280×800)
WQXGA (2560×1600)

Экспресс-ликбез

Возвратимся во время выхода первого Android-смартфона, G1 от T-Mobile, когда размер дисплеев был на уровне 3.2 дюйма. Со временем мы могли наблюдать плавное увеличение размеров, в значительной мере с выходом HTC Evo 4G, дебютировавшего с дисплеем 4.3”. В 2011 году мы увидели ряд топовых устройств с четырехдюймовыми дисплеями и разрешением 540х960 пикселей. В последующем поколении устройств топовые устройства оснащались разнообразными HD-дисплеями.

Стоит отметить, что производители телефонов спешно вешали ярлык «HD» на любой экран, имеющий 720 пикселей в ряд. По аналогии с телевизорами, есть разница между HD-разрешениями 720p и 1080p. От размера экрана также зависит, «сможет» ли глаз найти отличия между этими разрешениями. Кто-то поспорит, что разрешение 1080p на пятидюймовом дисплее чрезмерно и человеческий глаз не способен различать такие детали.

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

VGA

В первые годы жизни Android-устройства оснащались дисплеями Video Graphics Array (VGA) в различных вариациях и разных размеров. Стандартное VGA-разрешение составляет 640х480 пикселей (480х640 в зависимости от ориентации дисплея). Ранние Android-смартфоны имели дисплеи с разрешением 320х480 пикселей или HVGA. Почему “H”, вы спросите? Это указывает на то, что разрешение в два раза меньше стандартного VGA (Half, англ. – половина).

Следуя этому же принципу, QVGA-разрешение составляет ¼ от стандартного разрешения, 320х240 пикселей (Q от quarter, четверть). Увеличиваем размер, получаем WVGA-разрешение с теми же 480 пикселями в высоту, но с большей шириной, отсюда и W (wider– более широкий). Такое разрешение – 800х480 – было популярно в моделях 2010-2011 годов.

• Примеры HVGA-дисплеев: T-Mobile G1, HTC Hero, LG Optimus V, Motorola Cliq
• Примеры QVGA-дисплеев: Motorola Flipout, Samsung Replenish,Xperia X10 mini
• Примеры WVGA-дисплеев: HTC ECO 4G, HTC Desire, Nexus One, Samsung Galaxy S, Motorola Droid X

Иногда можно встретить и FWVGA-разрешение, что будет означать Full Wide VGA (буквально “VGA в полную ширину”). В этом случае привычное разрешение 854х480 пикселей.

• Примеры FWVGA-дисплеев: Motorola Droid, Sony Xperia U, Sony Xperia Play

XGA

Некоторые модели на базе Android имели дисплеи Extended Graphics Array (XGA) или их вариации. По аналогии с ПК, это разрешение в 1024х768 пикселей. В большое количество Android-смартфонов начинают устанавливать WXGA-дисплеи, что означает – вы уже догадались – широкий XGA с разрешением 1280х768 пикселей.

Если говорить о предельном разрешении, то есть WQXGA в планшете Samsung Nexus 10. Этот 10”-планшет предлагает пользователям картинку разрешением 2560х1600 пикселей, что в 4 раза больше WXGA. По сути перед нами “wider quad XGA” дисплей (quad– четверка).

• Примеры XGA-дисплеев: LG Optimus Vu.
• Примеры WXGA-дисплеев: Nexus 4, LG Optimus G, Samsung Galaxy Note
• Примеры WQXGA-дисплеев: Nexus 10

HD

Многие топовые смартфоны 2011 года оснащались qHD-дисплеями, что означало ¼ от HD-экрана. Заметьте, что маленькую “q” нельзя путать с заглавной “Q”. Первая означает ¼, вторая – 4X. Вы узнаете дисплеи qHD по разрешению в 540х960 пикселей. В 2012 году свет увидели многие аппараты с HD-дисплеями с 720 пикселями в ширину. Это до сих пор самый распространенный вид дисплеев в устройствах с экранами от 4 дюймов и выше, разрешение – 1280х720 пикселей.

На начало 2013 года топовые Android-смартфоны оснащались FHD-дисплеями (Full High Definition, буквально «полное высокое разрешение»). Это означает разрешение 1920х1080 пикселей, как в телевизорах. Некоторые производители именуют его “TrueHD” (“подлинное”) или 1080p HD. Первым официально признанным аппаратом с таким разрешением стал HTC J Butterfly, впоследствии появившийся на рынке США под названием Droid DNA. Впоследствии в 2013 году было анонсировано множество продуктов с дисплеями 1080p.

• Примеры qHD-дисплеев: HTC One S, Motorola Droid RAZR, HTC Sensation
• Примеры HD-дисплеев: HTC One X, Motorola Atrix HD, Samsung Galaxy Nexus
• Примеры FHD-дисплеев: Droid DNA, LG G2, Samsung Galaxy S4

QuadHD

Новая планка в разрешении дисплеев увеличивает в 2-4 раза разрешение стандарта 720p. Летом и во второй половине текущего года появится ряд продуктов с разрешением 2560х1440 пикселей. Первым производителем, установившим такой экран в своё устройство стала Oppo с аппаратом Find 7, более крупные бренды уже последовали за ним: новый флагман LGG3 стал первым аппаратом с Quad HD-разрешением от крупных игроков.

Так выглядит краткая эволюция разрешений дисплеев Android-устройств. Не так страшно, как могло бы показаться, не так ли? Само собой, этот список со временем может быть дополнен по мере появления новых стандартов.

Оригинальная статья

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

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

Адаптивные дизайны (responsive designs) адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты.

При создании адаптивного дизайна важно с самого начала определиться, на какие устройства и размеры экранов ориентирован разрабатываемый сайт. Мы должны выбрать устройства для адаптивной верстки: компьютеры, ноутбуки, планшеты и смартфоны. Кроме того, в пределах диапазонов ширин экранов для каждого из выбранного класса устройств мы должны определить, как будет работать адаптивная верстка – какие разрешения учитывать, а какие пропустить. Существует довольно большое многообразие возможных форматов экранов для каждого из видов устройств, но это не значит, что вы должны обязательно использовать их все. Достаточно выбрать лишь несколько наиболее распространённых форматов экранов для адаптивной вёрстки.

Вот несколько сниппетов для адаптивной верстки, в котором расписаны наиболее распространенные размеры дисплеев:

1. Смартфоны (Портрет и ландшафтный)
   

   @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

   @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

2. Смартфоны (ландшафтный)
   

   @media only screen and (min-width : 321px) {}

   @media only screen and (min-width : 321px) {}

3. Смартфоны (portrait)
   

   @media only screen and (max-width : 320px) {}

   @media only screen and (max-width : 320px) {}

4. iPads (Портрет и Ландшафтный)
   

   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

5. iPads (Ландшафтный)
   

   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

6. iPads (Портрет)
   

   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

7. Настольные компьютеры и ноутбуки
   

   @media only screen and (min-width : 1224px) {}

   @media only screen and (min-width : 1224px) {}

8. Большие экраны
   

   @media only screen and (min-width : 1824px) {}

   @media only screen and (min-width : 1824px) {}

9. iPhone 4
   

   @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {}

   @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {}

Для тестирования разрабатываемого сайта можно воспользоваться web-сервисами:

1. http://mattkersley.com
2. http://www.responsinator.com

Пояснение

1. @media only screen — только для экранов монитора;
2. min-width — условие «истина», когда ширина окна браузера больше установленного значения;
3. max-width — условие «истина», когда ширина окна браузера наоборот меньше установленного значения;
4. min-device-width — условие «истина», когда размер экрана устройства больше установленного значения;
5. max-device-width — условие «истина», когда размер экрана устройства меньше установленного значения;

Похожие записи

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

Apple iPhone 4/4S	3	640×960
Apple iPhone 5	4	640×1136
Apple iPhone 5C/5S	4	640×1136
Apple iPhone 6	4.7	1334×750
Apple iPhone 6 Plus	5.5	1920×1080
Apple iPhone 6S	4.7	1334×750
Apple iPhone 6S Plus	5.5	1920×1080
Apple iPhone SE	4	1136×640
ASUS Zenfone 2 Lazer ZE500KL	5	1280×720
BlackBerry Bold 9900	2.8	640×480
BlackBerry Z10	4.2	768×1280
Fly IQ451 Vista	5	720×1280
HTC Desire 600	4.5	540×960
HTC Desire C	3.5	320×480
HTC Desire SV	4.3	480×800
HTC Desire V	4	480×800
HTC Desire X	4	480×800
HTC One	4.7	1080×1920
HTC One 32Gb	4.7	1080×1920
HTC One S	4.3	540×960
HTC One SV	4.3	480×800
HTC One X	4.7	720×1280
HTC One X+	4.7	720×1280
HTC Windows Phone 8s	4	480×800
HTC Windows Phone 8x	4.3	720×1280
Huawei Ascend G630	5	720×1280
Huawei Honor 5X	5.5	1920×1080
Huawei Honor 6	5	1080×1920
Huawei Honor 7	5.2	1920×1080
Jiayu G6 Advanced	5.7	1080×1920
Lenovo IdeaPhone P770	4.5	540×960
Lenovo IdeaPhone S720	4.5	540×960
Lenovo K900	5.5	1080×1920
Lenovo P70	5	1280×720
Lenovo S60	5	1280×720
Lenovo Vibe Shot	5	1920×1080
LG G2 D802	5.2	1080×1920
LG Nexus 4 16Gb	4.7	768×1280
LG Nexus 5	4.95	1080×1920
LG Optimus 4X HD	4.7	720×1280
LG Optimus G	4.7	768×1280
LG Optimus G Pro E988	5.5	1080×1920
LG Optimus L5	4	320×480
LG Optimus L5 II Dual E455	4	480×800
LG Optimus L7 II Dual P715	4.3	480×800
LG Optimus L7 P705	4.3	480×800
LG Optimus L9	4.7	540×960
Meizu M2 Note 16Gb	5.5	1920×1080
Nokia 808 PureView	4	360×640
Nokia Asha 311	3	240×400
Nokia Lumia 520	4	480×800
Nokia Lumia 620	3.8	480×800
Nokia Lumia 720	4.3	480×800
Nokia Lumia 800	3.7	480×800
Nokia Lumia 820	4.3	480×800
Nokia Lumia 920	4.5	768×1280
Nokia Lumia 925	4.5	768×1280
Nokia X Dual Sim	4	480×800
Philips Xenium W732	4.3	480×800
Philips Xenium W832	4.5	540×960
Samsung Ativ S 16Gb GT-I8750	4.8	720×1280
Samsung Galaxy A5	5	1280×720
Samsung Galaxy A5 2016	5.2	1920×1080
Samsung Galaxy Ace Duos GT-S6802	3.5	320×480
Samsung Galaxy Ace GT-S5830	3.5	320×480
Samsung Galaxy Ace II GT-I8160	3.8	480×800
Samsung Galaxy Grand GT-I9082	5	480×800
Samsung Galaxy Mega 5.8 GT-I9152	5.8	540×960
Samsung Galaxy Mega 6.3 8Gb GT-I9200	6.3	720×1280
Samsung Galaxy Nexus GT-I9250	4.65	720×1280
Samsung Galaxy Note GT-N7000	5.3	800×1280
Samsung Galaxy Note II GT-N7100	5.55	720×1280
Samsung Galaxy S Duos GT-S7562	4	480×800
Samsung Galaxy S II GT-I9100	4.27	480×800
Samsung Galaxy S II Plus GT-I9105	4.3	480×800
Samsung Galaxy S III GT-I9300 16Gb	4.8	720×1280
Samsung Galaxy S III mini GT-I8190	4	480×800
Samsung Galaxy S4 GT-I9500	5	1080×1920
Samsung Galaxy S4 GT-I9505	5	1080×1920
Samsung Galaxy S4 mini GT-I9190	4	540×960
Samsung Galaxy S4 mini GT-I9195	4.27	540×960
Samsung Galaxy S4 Zoom SM-C101	4.3	540×960
Samsung Galaxy S5	5.1	1080×1920
Samsung Galaxy S6 SM-G920F	5.1	2560×1440
Samsung Galaxy Win GT-I8552	4.7	480×800
Samsung Galaxy Y Duos GT-S6102	3.14	240×320
Samsung Galaxy Y GT-S5360	3	240×320
Sony Xperia acro S	4.3	720×1280
Sony Xperia E dual	3.5	320×480
Sony Xperia go	3.5	320×480
Sony Xperia ion	4.55	720×1280
Sony Xperia J	4	480×854
Sony Xperia L	4.3	480×854
Sony Xperia miro	3.5	320×480
Sony Xperia P	4	540×960
Sony Xperia S	4.3	720×1280
Sony Xperia sola	3.7	480×854
Sony Xperia SP	4.6	720×1280
Sony Xperia tipo	3.2	320×480
Sony Xperia TX	4.55	720×1280
Sony Xperia V	4.3	720×1280
Sony Xperia Z	5	1080×1920
Sony Xperia Z1	5	1080×1920
Sony Xperia Z1 Compact	4.3	720×1280
Sony Xperia Z2	5.2	1080×1920
Sony Xperia ZL	5	1080×1920
Sony Xperia ZR LTE (C5503)	4.55	720×1280
YotaPhone — цвет.	4	720×1280
YotaPhone — чб	4	360×640
ZTE V987	5	720×1080
ZTE Z7 max	5.5	1920×1280

Самые популярные размеры экрана / разрешения на телефонах Android Oh! Android

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

Они не дают информацию / статистику, которую я ищу. Судя по второй ссылке, две наиболее важные категории экрана для поддержки – normal-hdpi и normal-mdpi .

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

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

РАЗРАБОТЧИК-DOCS

---

• 240*320-ldpi
• 240*400-ldpi
• 240*432-ldpi

---

• 320*480-mdpi
• 480*800-mdpi
• 480*854-mdpi
• 1024*600-mdpi
• 1280*800-mdpi

---

• 480*800-hdpi
• 480*854-hdpi
• 280*280-hdpi
• 320*320-hdpi

---

• 720*1280-xhdpi
• 1200*1290-xhdpi
• 2560*1600-xhdpi
• 768*1280-xhdpi

---

• 1080*1920-xxhdpi
• 800*1280-tvdpi

---

Я использую эту ссылку для создания своего приложения

Цитирование ответа из другого столбца stackOverflow для получения более подробной информации

 --------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ---------- Device Inches ResolutionPX Density DPI ResolutionDP AspectRatios SysNavYorN ContentResolutionDP --------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ---------- Galaxy Y 320 x 240 ldpi 0.75 120 427 x 320 4:3 1.3333 427 x 320 ? 400 x 240 ldpi 0.75 120 533 x 320 5:3 1.6667 533 x 320 ? 432 x 240 ldpi 0.75 120 576 x 320 9:5 1.8000 576 x 320 Galaxy Ace 480 x 320 mdpi 1 160 480 x 320 3:2 1.5000 480 x 320 Nexus S 800 x 480 hdpi 1.5 240 533 x 320 5:3 1.6667 533 x 320 "Galaxy SIII Mini" 800 x 480 hdpi 1.5 240 533 x 320 5:3 1.6667 533 x 320 ? 854 x 480 hdpi 1.5 240 569 x 320 427:240 1.7792 569 x 320 Galaxy SIII 1280 x 720 xhdpi 2 320 640 x 360 16:9 1.7778 640 x 360 Galaxy Nexus 1280 x 720 xhdpi 2 320 640 x 360 16:9 1.7778 640 x 360 HTC One X 4.7" 1280 x 720 xhdpi 2 320 640 x 360 16:9 1.7778 640 x 360 Nexus 5 5" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 YES 592 x 360 Galaxy S4 5" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 640 x 360 HTC One 5" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 640 x 360 Galaxy Note III 5.7" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 640 x 360 HTC One Max 5.9" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 640 x 360 Galaxy Note II 5.6" 1280 x 720 xhdpi 2 320 640 x 360 16:9 1.7778 640 x 360 Nexus 4 4.4" 1200 x 768 xhdpi 2 320 600 x 384 25:16 1.5625 YES 552 x 384 --------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ---------- Device Inches ResolutionPX Density DPI ResolutionDP AspectRatios SysNavYorN ContentResolutionDP --------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ---------- ? 800 x 480 mdpi 1 160 800 x 480 5:3 1.6667 800 x 480 ? 854 x 480 mdpi 1 160 854 x 480 427:240 1.7792 854 x 480 Galaxy Mega 6.3" 1280 x 720 hdpi 1.5 240 853 x 480 16:9 1.7778 853 x 480 Kindle Fire HD 7" 1280 x 800 hdpi 1.5 240 853 x 533 8:5 1.6000 853 x 533 Galaxy Mega 5.8" 960 x 540 tvdpi 1.33333 213.333 720 x 405 16:9 1.7778 720 x 405 Sony Xperia Z Ultra 6.4" 1920 x 1080 xhdpi 2 320 960 x 540 16:9 1.7778 960 x 540 Kindle Fire (1st & 2nd gen) 7" 1024 x 600 mdpi 1 160 1024 x 600 128:75 1.7067 1024 x 600 Tesco Hudl 7" 1400 x 900 hdpi 1.5 240 933 x 600 14:9 1.5556 933 x 600 Nexus 7 (1st gen/2012) 7" 1280 x 800 tvdpi 1.33333 213.333 960 x 600 8:5 1.6000 YES 912 x 600 Nexus 7 (2nd gen/2013) 7" 1824 x 1200 xhdpi 2 320 912 x 600 38:25 1.5200 YES 864 x 600 Kindle Fire HDX 7" 1920 x 1200 xhdpi 2 320 960 x 600 8:5 1.6000 960 x 600 ? 800 x 480 ldpi 0.75 120 1067 x 640 5:3 1.6667 1067 x 640 ? 854 x 480 ldpi 0.75 120 1139 x 640 427:240 1.7792 1139 x 640 Kindle Fire HD 8.9" 1920 x 1200 hdpi 1.5 240 1280 x 800 8:5 1.6000 1280 x 800 Kindle Fire HDX 8.9" 2560 x 1600 xhdpi 2 320 1280 x 800 8:5 1.6000 1280 x 800 Galaxy Tab 2 10" 1280 x 800 mdpi 1 160 1280 x 800 8:5 1.6000 1280 x 800 Galaxy Tab 3 10" 1280 x 800 mdpi 1 160 1280 x 800 8:5 1.6000 1280 x 800 ASUS Transformer 10" 1280 x 800 mdpi 1 160 1280 x 800 8:5 1.6000 1280 x 800 ASUS Transformer 2 10" 1920 x 1200 hdpi 1.5 240 1280 x 800 8:5 1.6000 1280 x 800 Nexus 10 10" 2560 x 1600 xhdpi 2 320 1280 x 800 8:5 1.6000 1280 x 800 Galaxy Note 10.1 10" 2560 x 1600 xhdpi 2 320 1280 x 800 8:5 1.6000 1280 x 800 --------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ---------- Device Inches ResolutionPX Density DPI ResolutionDP AspectRatios SysNavYorN ContentResolutionDP --------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ---------- 

Вот список почти всех разрешений таблеток, причем наиболее распространенные из них выделены жирным шрифтом :

2560X1600
1366X768

1920X1200
1280X800
1280X768
1024X800
1024X768
1024X600

960×640
960×540
854×480
800х600
800X480
800×400

Счастливое проектирование ..! 🙂

Другой альтернативой для просмотра популярных резолюций и пропорций для Android является статистика Unity :

ПОСЛЕДНИЕ СТАТИСТИКИ ЕДИНСТВА

Наверх 2017-01 :

Разрешение дисплея:

• 1280 x 720: 28,9%
• 1920 x 1080: 21,4%
• 800 х 480: 10,3%
• 854 x 480: 9,7%
• 960 x 540: 8,9%
• 1024 x 600: 7,8%
• 1280 x 800: 5,0%
• 2560 x 1440: 2,4%
• 480 x 320: 1,2%
• 1920 x 1200: 0,8%
• 1024 x 768: 0,8%

Соотношение сторон экрана:

• 16: 9: 72,4%
• 5: 3: 18,2%
• 16:10: 6,2%
• 4: 3: 1,7%
• 3: 2: 1,2%
• 5: 4: 0,1%

В блоге от Localytics, Android Not As Fragmented, как многие думают , перечислены самые популярные размеры и разрешения Android:

Еще одна проблема для разработчиков Android – размер экрана и разрешение. Из всех применений приложений, проанализированных для этого исследования, 41% всех сеансов приходилось на устройства Android с 4,3-дюймовыми экранами, безусловно, самым популярным размером. 4-дюймовые экраны составляли 22% сессий, 3,2-дюймовые экраны для 11%, а 3,7-дюймовые экраны – 9%.

Резолюции были еще менее фрагментированы, однако, с наиболее широко известным разрешением экрана – 800 х 480 пикселей, что способствовало 62% сеансов исследования. Следующими наиболее популярными разрешениями экрана были 480 x 320 (14%), 960 x 540 (6%), 480 x 854 (5%) и 320 x 240 (5%).

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

EDIT: вы также должны знать, что есть Android-планшеты с большими разрешениями. Следующая цитата из той же статьи, о которой я упоминал:

Разрешение экрана и размер на самом деле даже менее фрагментированы, чем телефоны – 74% использования планшета Android происходит на 7-дюймовых устройствах с разрешением 1024 x 600. 22% – 10,1-дюймовые устройства с разрешением 1280 x 800, поэтому, принимая во внимание две комбинации размеров экрана / разрешения, разработчики должны иметь возможность легко достигать почти всех рынков планшетов Android.

В настоящее время официальные метрики устройств на сайте Material Design, эти показатели являются списком выбранных вручную устройств, а не фактической статистикой, но также могут быть очень полезными: https://material.io/devices/

Подавляющее большинство современных экранов телефонов Android android 2.1+ – 480×800 (или в случае модных приключений 480×854)

Однако это не означает, что это должно быть вашей единственной заботой. Вам нужно сделать так, чтобы он выглядел хорошо на планшетах, а меньшие экраны меньшего размера или на 4: 3.

RelativeLayout – ваш друг!

Ответы@Mail.Ru: Параметры экрана мобильного телефона: в пикселях и милиметрах/дюимах

Изображение строится из цветных точек как на чертежной бумаге «миллимитровке»(если помните такую. Хотя можно вспомнить и тетрадки в клеточку) . Эти точки обычно назваются пикселями. Чем их больше на одну и ту же площадь тем лучше — изображение кажется более естественным — без зернистости, кажется более гладким. Ясное дело что физический размер пикселя в разных устройствах — разный. Он больше на дисплеях с большой диагональю и меньшим разрешением чем на дисплеях с маленькой диагональю и большим разрешением. Применительно к экранам мобил — чем меньше диагональ мобилы при равных разрешениях экрана или наоборот более высокое разрешение при равной дагонали — тем изображение кажется более естественным. Применительно к камерам ситуация таже. Большее число пикселей в снимке камеры программно уменьшается для подгонки его под размер экрана. Из четырех пикселей расположеных в виде квадрата делают один — в итоге изображение уменьшается в четыре раза — оно просто становится более четким и все. Делается это несколько раз для подгона всего большого изображения под маленький экран. Вертикаль и горизонталь при съемке понятие условное — ничего не мешает держать мобилу вертикально или горизонтально. Разрешения экранов и матриц пишут для описания их цифровых размеров и только. В фотоаппаратах есть еще показатель — диагональ матрицы. То же что и диагональ экрана. В мобилах про нее не пишут потому что нет особого смысла писать — она у всех не настолько велика что бы как то влиять на качество съемки. Игры ищутся по пикселям потому что программисты пишут их по пикселям. А пишут они их так потому что так удобнее. Вот пример — нужно что бы на экрану проехала машинка слева направо. У нас две мобилы на которых эта машинка будет кататься. Одна с большим экраном 4 дюйма скажем. Другая маленькая с 2.4 дюймовым экраном. Но разрешение экранов у них одинаковое. Если мы будем задавать в сантиметрах дюймах локтях парсеках то нам придется для этих машин писать две программы. Потому что допустим даже начальное положение машинки условно можно считать за 0 то конечное это сколькото сантиметров. Для мобилы с большим экраном больше для мобилки с маленьким меньше. При использовании такого метода прога написаная для маленькой мобилы на большой мобиле покажет что машинко не доехала до нужного места. И перехала и исчезла с экрана если все наоборот — прогу для большой мобилы запустили на маленькой. Но мы то знаем что разрешение экрана у мобил одинаковое. Скажем 240 Х 400 пикселей Поэтому начальную координату мы как и в первом рассмотренном варианте даем 0 а конечную 400. Эта цифра одинаковая у обеих мобил. Нам нужно писать только одну прогу что бы машинко ездила на двух телефонах. Более того скажу — правилом хоршего тона считается не давать абсолютных координат — в пикселях ли в сантиметрах и т. д. Экранные координаты в приличных прграммах задаются функционально. В той же J2ME — языке программирования для мобил есть функции которые определяют высоту и ширину дисплея любого устройства. И вот к ним уже привязываются все остальные координаты. Поэтому некоторые игры назвают мультиэкранными — они одинаково хорошо отображают графику на любой мобиле. Так вот к чему это я — привязка к функциям осущется на основе пикселного счета и не метрического.

Да это просто параметр что на экране в 2,8 дюйма помещается 240 на 320 точек вот и все, а про фото и видео тоже точки только бкз милиметром и дюймов, тоесть фотка будит 1600 на 1200 пикселей, чем выше разрешение фотки тем лучше, но качество фотографии в большей степени зависит от начинки аппарата, с видео тоже самое, только добавляются кадры в секунду,

Так, давайте по порядку. «Размер экрана: 2.8 дюйма » это диагональ экран, 2.8″ = 7.1 см «Разрешение экрана: 240 x 320» это показатель сколько точек экран может отображать точек по вертикали и горизонтали. Чем больше — тем четче изображение, меньше заметна зернистость экрана (т. е. меньше заметно, что экран состоит из точек, пикселей) . «зачем/ в каких случаях важны пиксели и/или мм? » Это главный показатель экрана. Здесь разрешение маловато, но терпимо «Макс. кол-во кадров в секунду: 15» при съемке видео показывает, сколько кадров за секунду способна записать камера. Чем выше — тем более плавным получится видео. Оптимально — 25 кадров в секунду «Количество активных пикселей: 2 Мп » — показывает количество пикселей сенсора камеры, которые способны воспринимать изображение. Опять же, чем выше — тем лучше, более детальный снимок получится «Максимальное разрешение: 1600 x 1200» — максимальный размер фотографии в пикселях по вертикали и диагонали «Максимальное разрешение видео: 320 x 240 » — максимальный размер видео в пикселях по вертикали и диагонали «Т. е. то что снял на камеру — на экране увидеть в этом же разрешении нельзя? » — в том разрешение нет. Телефон «подгонит» под разрешение. Но не что не мешать изменить масштаб. На экране телефона такая фотография будет выглядеть неплохо, а вот на экране компьютера будут видны все огрехи камеры