Что такое соотношение пикселей устройства?

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

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}
Источник

5 ответов

Решение

Короткий ответ

Соотношение пикселей устройства - это соотношение между физическими и логическими пикселями. Например, iPhone 4 и iPhone 4S сообщают о соотношении пикселей устройства 2, потому что физическое линейное разрешение вдвое превышает логическое линейное разрешение.

  • Физическое разрешение: 960 х 640
  • Логическое разрешение: 480 х 320

Формула:

linres_p / linres_l

Куда:

linres_p это физическое линейное разрешение

а также:

linres_l логическое линейное разрешение

Другие устройства сообщают о различном соотношении пикселей устройства, включая нецелые. Например, Nokia Lumia 1020 сообщает 1.6667, Samsumg Galaxy S4 сообщает 3, а Apple iPhone 6 Plus сообщает 2.46 (источник: dpilove). Но это ничего не меняет в принципе, так как вы никогда не должны разрабатывать для какого-то одного конкретного устройства.

обсуждение

"Пиксель" CSS даже не определяется как "один элемент изображения на некотором экране", а скорее как нелинейное угловое измерение 0,0213 ° угол обзора, который составляет примерно 1/96 дюйма на расстоянии вытянутой руки. Источник: CSS Абсолютные Длины

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

Если вы застряли с растровыми изображениями, чтобы приспособиться ко многим различным соотношениям пикселей устройства, вы должны использовать CSS Media Queries, чтобы предоставить разные наборы ресурсов для разных групп устройств. Объедините это с хорошими трюками, такими как background-size: cover или явно установить background-size в процентах

пример 

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

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

Чехол для векторной графики

По мере того, как появляется все больше и больше типов устройств, становится все сложнее предоставить всем им адекватные растровые ресурсы. В CSS медийные запросы в настоящее время являются единственным способом, а в HTML5 элемент picture позволяет вам использовать разные источники для разных медиа-запросов, но поддержка все еще не на 100 %, так как большинству веб-разработчиков все еще приходится поддерживать IE11 еще некоторое время (источник: caniuse).

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

Источник

Соотношение пикселей устройства == Соотношение пикселей CSS

В мире веб-разработок соотношение пикселей устройства (также называемое CSS Pixel Ratio) определяет то, как разрешение экрана устройства интерпретируется CSS.

CSS браузера рассчитывает логическое (или интерпретированное) разрешение устройства по формуле:

формула

Например:

Apple iPhone 6s

  • Фактическое разрешение: 750 x 1334
  • Соотношение пикселей в CSS: 2
  • Логическое разрешение:

формула

При просмотре веб-страницы CSS будет думать, что устройство имеет экран с разрешением 375x667, а Media Queries будет отвечать так, как если бы экран был 375x667. Но визуализированные элементы на экране будут в два раза четче, чем фактический экран 375x667, потому что на физическом экране их в два раза больше.

Некоторые другие примеры:

Самсунг гэлакси с4

  • Фактическое разрешение: 1080 х 1920
  • Соотношение пикселей CSS: 3
  • Логическое разрешение:

формула

айфон 5с

  • Фактическое разрешение: 640 x 1136
  • Соотношение пикселей в CSS: 2
  • Логическое разрешение:

формула

Почему существует Пиксельное соотношение устройств?

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

Типичный полноэкранный настольный монитор составляет примерно 24"при разрешении 1920x1080. Представьте, что этот монитор был уменьшен до 5", но имел то же разрешение. Просмотр вещей на экране был бы невозможен, потому что они были бы такими маленькими. Но производители выпускают экраны телефонов с разрешением 1920x1080 постоянно.

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

Вот инструмент, который также сообщает вам плотность пикселей вашего текущего устройства:

http://bjango.com/articles/min-device-pixel-ratio/

Источник

Статья Бориса Смуса " Изображения с высоким разрешением для переменных плотностей пикселей" дает более точное определение соотношения пикселей устройства: количество пикселей устройства на пиксель CSS является хорошим приближением, но не всей историей.

Обратите внимание, что вы можете получить DPR, используемый устройством с window.devicePixelRatio,

Источник

https://developer.mozilla.org/en/CSS/Media_queries

-moz-устройство пиксел соотношение
Дает количество пикселей устройства на пиксель CSS.

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

Источник

Соотношение пикселей устройства напрямую связано с плотностью пикселей устройства.

Лучшее краткое описание, которое я смог найти:

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

Источник: screenresolutiontest

Источник
Другие вопросы по тегам