Краткий ответ
Соотношение пикселей устройства - это соотношение между физическими и логическими пикселями.Например, 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-пиксель даже не определяется как «один элемент изображения на некотором экране»", а скорее как нелинейное угловое измерение из 
viewing angle, which is approximately 
of an inch at arm's length. Source: абсолютных длин 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, который прекрасно масштабируется для всех разрешений.