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

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

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

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

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

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

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

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

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

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

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

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

Устройства Apple

Устройства Android

Узнать стоимость адаптации вашего сайта можете тут → или в форме ниже

Источник

Что такое разрешение экрана смартфона и как отличить HD, Full HD от 4K

Читайте, что такое разрешение экрана смартфона. И что на самом деле означают названия разрешений дисплея, такие как HD, Full HD, WQHD, UHD, 4K, 5K, 6K и 8K?

На рынке представлено бесчисленное множество смартфонов с различными размерами дисплеев, различным разрешением экрана и специальными названиями для этих характеристик. Нелегко понять разницу между ними всеми. Full HD или WQHD – что означают эти аббревиатуры? И какое отношение имеют к цифрам типа 1920×1080?

Что такое разрешение экрана смартфона?

Сначала давайте определимся с термином “разрешение экрана”. Для отображения изображений на экране смартфонов и компьютеров используются миллионы маленьких пикселей (точек), из которых состоит дисплей. Количество пикселей по горизонтали и вертикали – это и есть разрешение экрана.

Разрешение экрана обычно обозначается как 1024×768 пикс (или 1366×768, 1920×1080). Эти цифры означают, что у экрана 1024 пикселя по горизонтали и 768 пикселей по вертикали.

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

Производители всяких устройств с экранами, чтобы не путать покупателей цифрами, придумали красивые названия для стандартных разрешений. Выглядят они как HD, qHD, WQHD, Full HD, 4K и т.д. Ниже вы можете видеть таблицу соответствия названий и числовых значений разрешения экранов.

Таблица популярных разрешений экранов телефонов

Что такое HD (720p) и Full HD (1080p)

Никогда еще технические характеристики так не вводили в заблуждение простых людей, как в случае с разрешением HD и Full HD. Эти слова пихали куда ни попадя: и в телевизорах, и в смартфонах.

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

Так как в телефонах, в отличие от телевизоров, экран обычно меньше по горизонтали, и выше по вертикали, часто в их характеристиках пишется вот так: 720×1280 или 1080×1920.

Не забывайте, что разрешение экрана – это величина относительная. Поэтому вы можете встретить и смартфоны, и телевизоры с разрешением Full HD. Естественно у последних диагональ экрана будет больше. А значит у телевизоров из-за размера экрана плотность пикселей будет меньше. Например, смартфон с Full HD показывает гораздо больше деталей, чем монитор с таким же Full HD. Сами подумайте, ведь у смартфона на один дюйм приходится около 300 ppi (пикселей). А у телевизора, например, всего 60 ppi.

Но разницу вы не всегда почувствуете. Так как телевизор вы смотрите с расстояния 2-4 метров. А экран телефона у вас всегда на расстоянии вытянутой руки.

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

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

Разрешение экрана 2K (2К, WQHD, 1440p)

За последние пять лет производители отчаянно пытались встроить в смартфоны экраны с более высоким разрешением. Даже там, где они не особо и нужны. В результате, экраны Quad High Definition (QHD) стали популярными в современных телефонах среднего и верхнего ценового диапазона.

В разрешении QHD в четыре раза больше пикселей, чем в стандартном 720p (HD). А именно 2560×1440 пикс. Потому кратко еще называется 1440p. Часто такое разрешение еще называют WQHD (Wide Quad High Definition – англ.). Тут все дело в соотношении сторон. О нем мы расскажем чуть позже в этой статье.

Иногда разрешение QHD называют 2K. Подразумевая, что это вдвое меньше разрешения 4K. Это не совсем правильно. Технически, разрешение 2K составляет 2048×1080. А значит QHD все-таки лучше. QHD можно даже назвать 2.5K.

Разрешение 4K и UHD

Как и в случае с QHD и 2K, разрешения 4K и Ultra High Definition (UHD) часто смешивают и заменяют. Снова-таки, это не совсем честно и правильно.

Экраны 4K имеют разрешение 4096×2160 пикселей. UHD отличается количеством пикселей: 3840×2160. Путаница происходит из-за того, что 4K – это профессиональный термин производителей кино. А UHD – термин для людей и производителей техники. И снова все это связано с соотношением сторон. Потерпите! Скоро мы о нем расскажем.

Оба разрешения (4K и UHD) часто называют 2160p. До сих пор большинство производителей старались не ставить в телефоны экраны 4K. Так как чем больше разрешение, тем больше заряда батареи кушает дисплей. Но вы все-таки можете найти на рынке нелепые и редкие телефоны 4K. Например Sony.

5K, 6К и 8К разрешение

5K разрешение – редкость. В телефонах вы такое не встретите. 5120×2880 пикселей в экране смартфона уже кажется перебором даже самым жадным до цифр производителям. Это вдвое выше разрешения QHD.

Есть еще 6K и 8K. Будем надеяться, что такие смартфоны появятся не скоро. А когда появятся, будут изобретены новые типы батарей, которые смогут выдержать энергетические аппетиты таких дисплеев.

Что такое соотношение сторон экрана

Так как производители экранов – люди с больной/большой/бурной (выбирайте наиболее вам подходящее) фантазией, то, кроме разрешения, диагонали и плотности пикселей, они еще придумали характеристику “соотношение сторон“.

Соотношение сторон – это пропорциональное соотношение между шириной и высотой видеоизображения. Вот как это обычно пишется: 1:1, 16:9 и 4:3.

Какие бывают соотношения сторон

Наиболее распространенными являются 16:9 или 9:16, 4:3, 1:1 и 2.4:1.

При разрешении 1920×1080 пикселей у экрана будет соотношение сторон 16:9. Это наиболее популярное соотношение. Его поддерживают кинокомпании, интернет-сервисы. Именно с таким соотношением сторон снимаются видео на телефонах.

При этом в смартфонах часто используются нестандартные разрешения. А потому и соотношение сторон там будет нестандартное. Например в айфонах можно встретить такое: 2.17:1.

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

Источник

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

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

Если кратко

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

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

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

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

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

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

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

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

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

240×320

320×240

320×480

480×360

Blackberry: Torch, Storm, Bold

360×640

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

480×800

768×1024

640×960

1280×800

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′ открывается с глюками. Лень было делать горизонтальный скроллинг в таблицах — так хоть бы шрифт уменьшили, что ли.

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

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

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

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

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

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

Источник

Учи матчасть. Ищем лучший дисплей в смартфонах

В этой серии материалов мы подробно разбираем смартфоны «по винтикам». В прошлый раз говорили о том, какую роль в современных телефонах играет процессор. Сегодня речь пойдет о другом важнейшем компоненте любого смартфона — дисплее. OLED или IPS? Full HD или 4K? 60 или 120 Гц? В конце концов, что все это вообще такое и на что ориентироваться при выборе?

Коротко, о чем пойдет речь

Тип матрицы

Абсолютное большинство современных смартфонов используют экран одного из двух типов: OLED (матрицы на органических светодиодах) или LCD (жидкокристаллические — или ЖК — панели). Так уж сложилось, что первые чаще применяются в телефонах подороже, а вторые — в более бюджетных аппаратах. Впрочем, бывают и исключения.

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

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

Нет идеального дисплея, потому что и у IPS, и у OLED (еще можно встретить название AMOLED) есть свои достоинства и недостатки. Так, у IPS-матриц очень большой ресурс работы и имеется то, что принято называть «естественной цветопередачей». Однако они не обеспечивают отображение глубокого черного цвета (обычно вместо черного мы видим темно-серый) и отличаются довольно высоким энергопотреблением из-за наличия отдельного слоя подсветки. Это из того, что может быть заметно любому пользователю.

У OLED все отлично с выводом черного (лучше просто не может быть), а энергопотребление чуть ниже (в первую очередь за счет того, что «окрашенные» в черный цвет пиксели вообще не потребляют энергии: они просто выключены). С другой стороны, органические светодиоды со временем выгорают и теряют яркость (впрочем, для смартфонов, которые мы меняем относительно часто, это не так уж важно), а еще многие видят мерцание.

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

Но есть другой момент, связанный с передачей белого цвета. Из-за особенности строения матрицы на органических светодиодах светлые тона обычно имеют зеленовато-синий оттенок. А у IPS часто можно заметить уход в теплые оттенки и преобладание желтого с легким отклонением в красный спектр.

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

Ответить на вопрос «Какой тип матрицы лучше?» невозможно. При правильной заводской настройке визуально различимые характеристики экранов на разных матрицах очень близки. AMOLED в недорогом телефоне может оказаться куда хуже IPS в смартфоне аналогичной ценовой категории или даже дешевле. Поэтому при выборе мы бы вообще не рекомендовали ориентироваться только на тип матрицы («Ого! OLED в телефоне за 400 рублей! Беру!»). В целом современные телефонные матрицы уже избавились от некогда имевших место существенных недостатков (низкая скорость отклика, маленькие углы обзора), и даже после покупки самых недорогих телефонов вы вряд ли останетесь недовольны тем или иным дисплеем.

Разрешение

В отличие от типа матрицы, этот показатель куда критичнее для восприятия картинки. При этом и разобраться здесь куда проще. Например, вы видите, что разрешение экрана заинтересовавшего вас смартфона выглядит так: 1080×1920. Первое число указывает на количество пикселей, расположенных по горизонтали, а второе — по вертикали. Все разрешения, помимо числового формата, также обозначаются аббревиатурой. Наиболее распространенные вы наверняка видели: так, те же 1080×1920 — это Full HD, 1440×2560 — QHD (или еще 2K), а 2160×3840 — Ultra HD (или 4K) и так далее.

Чем больше пикселей на экране, тем больше информации на нем помещается и тем четче выглядит изображение. Но есть нюанс. Одно дело — разместить 1080 пикселей по горизонтали и 1920 по вертикали, например, на 27-дюймовом компьютерном мониторе, и совсем другое — на относительно маленьком 6,5-дюймовом дисплее смартфона. Разрешение одинаковое, но в первом случае получим огромные пиксели, каждый из которых вы будете видеть невооруженным глазом. Отсюда «зернистость» картинки, которая не радует глаз.

Поэтому вместо разрешения правильнее обращать внимание на такой показатель, как плотность пикселей на дюйм. Потому что он учитывает не только разрешение экрана, но и его размер. Видите значение 300 ppi? Значит, на одном дюйме помещается 300 пикселей. Другой вопрос — много этого, мало или достаточно? Вопрос в некоторой степени анатомический.

Считается, что здоровый глаз человека физически не способен разглядеть нюансы экрана с разрешающей способностью более 350 ppi. То есть что 350, что 1350 ppi — для вас оба дисплея будут в равной степени четкие, без возможности различить отдельные пиксели. Для примера: в том же экране 27-дюймового монитора с разрешением Full HD показатель ppi составит 105, а в 6,5-дюймовом дисплее — неразличимые 340.

Сегодня маркетологи стараются работать в команде с инженерами. Так в смартфонах появляются дисплеи с 500, 600 и даже 800 ppi! Все это не несет никакой пользы для человека. Более того, подобные дисплеи отличаются повышенным энергопотреблением.

Скорее всего, вы будете полностью довольны смартфоном с экраном на 350 ppi. Для чересчур впечатлительных особ, которым нужна особая «противопиксельная гарантия», можно посоветовать что-нибудь в районе 400 ppi. Все, что выше, по крайней мере не стоит рассматривать в качестве определяющего фактора при покупке: экран с 600 ppi не будет четче дисплея с 400 ppi. Именно поэтому во многих флагманских смартфонах по умолчанию установлено разрешение пониже, хотя в рекламе всенепременно делается упор на сверхвысокое разрешение. Пользователь же даже не заметит разницы.

Таким образом, применительно к дисплеям важно не столько разрешение, сколько значение ppi — количество пикселей, помещаемых на одном дюйме площади экрана. Однако и в этом случае формула «чем больше, тем лучше» работает только до определенного момента. Точнее, до 300—400 ppi. Все, что выше, — чистейшей воды маркетинг, абсолютно ненужный в быту.

Частота обновления

До недавнего времени большинство смартфонов довольствовались частотой обновления экрана на уровне 60 Гц. Здесь тоже все просто: это означает лишь то, что в течение секунды изображение на дисплее перерисовывается 60 раз. Однако вслед за настольными мониторами этот показатель начал расти и в смартфонах.

Сначала появились модели с частотой обновления экрана 90 Гц, а с недавнего времени расширяется модельный ряд с 120 Гц. Что это дает в реальности? В первую очередь — более плавную анимацию различных эффектов. Плавно скроллится текст в браузере, плавно перемещаются менюшки. В общем и целом глазам становится приятнее. Но опять же не без нюансов.

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

Источник