популярные разрешения экранов телефонов 2020

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

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

Если кратко

Дизайн с резиновой версткой при минимальной ширине в 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, чтобы стили переписывались под ПК или ноут, если потребуется, а на мобильниках грузились по минимуму, т.к. производительность на ПК заметно выше, нежели чем на мобильных устройствах и там это не будет особо критичным.

Источник

Что такое разрешение экрана смартфона и как отличить 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.

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

Источник

ТОП 10 телефонов с лучшими экранами (2020)

Не существует определения «лучший экран», потому что кто-то не выносит ШИМ или выкрученные цвета на OLED-ах, а кому-то не нравится ограниченная контрастность на IPS. Причем, есть ряд других характеристик, определяющих, насколько тот или иной экран является «хорошим» или нет. Ниже – СУБЪЕКТИВНЫЙ рейтинг смартфонов с классными экранами, причем, отобраны не только флагманы, но и бюджетники.

Samsung Galaxy S20

Samsung как производитель Amoled-матриц, занимает бОльшую долю рынка OLED-матриц для смартфонов, ставит на свои флагманы только самое лучшее, и это логично, так как подобный подход повышает конкурентоспособность собственных телефонов на рынке. Очередной флагман опять становится лучшим по части экрана – Galaxy S20 получил матрицу с разрешением QHD+, которая может работать с частотой обновления в 120 Гц, правда, с FHD+ разрешением. В таком режиме скроллинг становится более плавным, и пользоваться телефоном становится приятнее.

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

Мощное «железо», защита от воды, крутая камера с OIS и флагманские технологии вроде обратной зарядки прилагаются, поэтому Samsung S20 – лучшее, что есть на рынке сегодня, в том числе и по части экрана. Подробности – в обзоре Samsung Galaxy S20

Google Pixel 4

Флагман от Google, который стоит гораздо дешевле, чем Samsung S20. Он предлагает OLED-дисплей диагональю 5.7 дюйма, то есть, это не «лопата», что однозначно записываем в достоинства. Экран здесь примечателен в первую очередь частотой обновления 90 Гц, во вторую – максимальной контрастностью. Само собой, он воспроизводит HDR-контент, хотя едва ли вы где-нибудь найдете качественное видео с HDR.

Плюс, Pixel 4 оснащен шикарной камерой и еще более шикарным софтом под нее, способным регулировать экспозицию еще до того, как кадр будет сделан. Добавим сюда защиту от воды, телефото камеру с 2-кратным зумом, стереодинамики и мощный 7-нм процессор Snapdragon 855. Плюс, здесь есть фишка – сенсор спереди, который реагирует на жесты владельца, что позволяет листать треки, например, жестом руки в воздухе, не прикасаясь к смартфону.

Недостаток – низкая автономность: всего 9:35 ч веб-серфинга или 11:16 ч видео проигрывания. Если в приоритете не только хороший экран, но и высокая автономность, то Pixel 4A лучше не брать. Подробности – в обзоре Google Pixel 4

OnePlus 7T Pro

Еще один классный флагман от BBK – OnePlus 7T Pro с экраном OLED с частотой обновления 90 Гц. Уже вышли OnePlus 8 и OnePlus 8 Pro с более продвинутыми матрицами, но в продаже их пока нет, поэтому на третье место попадает именно OnePlus 7T Pro или обычный 7 Pro (без T).

Максимальная контрастность, HDR10+, точная цветопередача, сканер отпечатков под экраном прилагаются. Плюс, здесь стоит мощный процессор, классная 48 Мп камера с OIS и большая батарея на 4085 мАч и даже стереодинамики, но есть подозрение, что этот флагман стоит дороже, чем должен был. Подробности – в обзоре OnePlus 7T Pro.

Xiaomi Mi 9T

Недорогой телефон от «Сяоми» с классным OLED-экраном с HDR и максимальной контрастностью. Скорее всего, это самый дешевый телефон на рынке с подобными характеристиками дисплея.

Причем, это далеко не единственный плюс аппарата. Также у него мощный средний процессор Snapdragon 730, хорошая камера Sony IMX 582, есть телефото и широкоугольная камеры. Внутри – батарея на 4000 мАч + быстрая зарядка на 18 Вт, есть NFC и сканер отпечатков под экраном. Результаты тестирования и примеры фото – в обзоре Xiaomi Mi 9T.

Samsung Galaxy A71

Средний смартфон от корейского бренда «Самсунг», который также предлагает классный Amoled-экран, правда, без поддержки HDR10. Но даже и без этого качество экрана на высшем уровне: во-первых, здесь бесконечная контрастность (то есть, нет света на черных тонах); во-вторых, яркость экран высокая – 515 кд/м2, погрешность цветопередачи низкая – DeltaE 1.7, что круто.

Добавим сюда мощный процессор Snapdragon 730, большую батарею на 4500 мАч, быструю зарядку, NFC и классную 64 Мп камеру и получим шикарный телефон с одним из лучших в мире экраном, пусть и без HDR.

Источник