22.10.2021

Статистика по разрешению мониторов

 

Статистика по разрешению мониторов. Разрешение экрана смартфона: какое выбрать

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

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

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

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

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

Минимальные значения и максимальные значения

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

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

На данный момент 99 процентов смартфонов выходят с тремя типами экранов

  • HD (1280x 720, 720p);
  • Full HD (1920×1080, 1080p );
  • Quad HD (2560×1440, 1440p ).

Какое разрешение экрана выбрать?

Одним из самых популярных разрешений дисплея смартфона является 1280 на 720 пикселей — HD . Практически все гаджеты бюджетного ценового сегмента оснащены именно таким показателем.

Выберите, с чего начать: мобильный или рабочий стол

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

Веб-шрифты или системные шрифты

Более мощные устройства оборудованы дисплеями с бОльшим разрешением. Смартфоны с экранами 1920 на 1080 появились давно и уже никого не удивляют. Если диагональ смартфона составляет от 4,5 до 5,5 дюймов, лучше всего подойдет экран 1920×1080 точек (Full HD). При меньшем разрешении на изображении будут заметны пиксели, и пользователь может ощутить дискомфорт. Наверно, это и есть золотая середина — цены невысокие, изображение четкое и яркое.

Для удобства и маневренности рекомендуется использовать системные шрифты. При разработке макета убедитесь, что логотип и изображения имеют много деталей. Они будут загружаться лучше, если они находятся в растровом изображении. При переносе на отзывчивый дизайн необходимо проявлять определенную осторожность. Скрытие содержимого из-за ограничений мобильного макета может подорвать цель содержимого веб-сайта. Это также должно быть сбалансировано, чтобы предотвратить «раздувание» контента, что делает сайт тяжелым для загрузки в мобильной версии, например.

При диагонали более 5,5 и более дюймов во флагманских устройствах используется разрешение Quad HD (2650×1440). Качество изображение здесь высокое, но, если верить , человеческий глаз практически не в силах заметить существенную разницу. Quad HD — характеристика будущего, она необходимо для технологий дополненной и виртуальной реальности.

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

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

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

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

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

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

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

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

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

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

Физический пиксель вашего устройства

Однако два устройства имеют физически экраны одинакового размера. Но на мониторах с высоким разрешением это может сделать некоторые элементы очень маленькими. Но элементы всегда одного размера. Для мобильных устройств у нас есть третий тип пикселя: «пиксель устройства». Он в основном представляет ширину вашего устройства в пикселях по сравнению с монитором с разрешением 96 точек на дюйм.

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

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

Физический пиксель или «пиксель устройства» соответствует размеру экрана вашего устройства. Это отличается от разрешения. И в настоящее время с ростом числа планшетов и смартфонов все труднее найти шаблон. Видовой экран — это в основном видимая часть вашего сайта. Если вы измените размер браузера, вы увидите меньше места. На мобильном устройстве дело совсем другое. В принципе, нет способа изменить размер экрана браузера вашего телефона. Все приложения занимают 100% от ширины. В начале смартфонов, где еще не было разговоров об оперативном развитии, эту проблему пришлось преодолеть.

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

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

Текст с искривленным словом плохо читается, небольшие ссылки трудно прикоснуться. У него просто ужасное использование на телефоне. Давайте играть, чтобы думать о логике вещи: вы находитесь в сотовом телефоне с физической шириной 320 пикселей. Этот сотовый телефон имеет экран с высоким разрешением и 326 точек на дюйм. Это означает, что для каждого 1 физического пикселя мы получим 2 пиксельные пиксели. Каждый пиксель размером 1 пиксель 980 пикселей меньше, поэтому все они помещаются в пиксель 640 смартфона.

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

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

Указание ширины моего окна просмотра

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

И почему это философский камень для моего отзывчивого дизайна?

Это говорит браузеру, что видимая часть моего контента будет эквивалентна ширине физических пикселей на моем устройстве. На смартфоне с шириной 320 пикселей мой просмотр — 320 пикселей. Для этого просто замените «ширину устройства» на нужный размер. Прочитайте статьи Дани Гуеррато «Отзывчивый дизайн».

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

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

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

 

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

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

Вы также можете увеличить масштаб. Очень важно позволить пользователю решить, насколько близко он или она хочет переместить элементы. Часто пользователь с проблемами зрения использует слишком большой коэффициент масштабирования для удобства чтения. Чтобы определить максимальное и минимальное масштабирование, которое может дать пользователь, мы используем параметр «минимальная шкала» и «максимальная шкала». В этом примере пользователь может увеличить размер элементов до 4 раз и уменьшить до 5 раз.

Опять же: не увеличивайте масштаб пользователя. Если у вас нет очень хорошего оправдания и очень убедительных мотивов, никогда не запрещайте пользователю делать это. Быстро этот шаблон был принят всеми браузерами. Таким образом, использование этого тега является ненормативным стандартом. Мы объявляем это как в примере ниже.

Еще одна штука, которая обычно не оправдывает затраты времени в настольном виде и вызывает проблемы в мобильном — это кастомные элементы форм. То, что средствами 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.

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

http://thesaker.ru/internet/statistics-on-the-resolution-of-monitors-smartphone-screen-resolution-which-one-to-choose/

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

X

Adblock
detector