Ответ 1

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

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

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

Формула:

Где:

- физическое линейное разрешение

и

- это логическое линейное разрешение

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

Обсуждение

"пиксель" CSS даже не определен как "один элемент изображения на каком-то экране", а скорее как нелинейное измерение angular , которое приблизительно дюйма на длину руки. Источник: Абсолютные длины 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 вычисляет логическое (или интерпретируемое) решение по формуле:

Например:

Apple iPhone 6s

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

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

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

Samsung Galaxy S4

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

iPhone 5s

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

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

Причина, по которой отношение 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.