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

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

@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

}

Ответ 1

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

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

  • Физическое разрешение: 960 x 640
  • Логическое разрешение: 480 x 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 даже не определен как "один элемент изображения на каком-то экране", а скорее как нелинейное измерение angular 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 элемент позволяет использовать разные источники для разных медиа-запросов, но поддержка по-прежнему не 100%, так как большинству веб-разработчиков по-прежнему приходится поддерживать IE11 еще некоторое время (источник: caniuse).

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

Ответ 2

Соотношение пикселей устройства == Коэффициент пикселя CSS

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

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

formula

Например:

Apple iPhone 6s

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

formula

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

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

Samsung Galaxy S4

  • Фактическое разрешение: 1080 x 1920
  • Коэффициент пикселей CSS: 3
  • Логическое разрешение:

formula

iPhone 5s

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

formula

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

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

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

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

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

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

Ответ 3

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

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

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

Ответ 4

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

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