Возможно, Вы замечали, что при вёрстке для мобильных устройств мы применяем стили не более 576 пикселей по ширине. Но при этом мы знаем, что современные мобильные телефоны могут иметь размер экрана и 1440×2960 пикселей.
Тут то и стоит рассказать про DPR — Device Pixel Ratio.
Смотрите, как интересно. С одной стороны у нас есть устройство с каким-то определённым физическим разрешением. Например, пусть это будет Samsung Galaxy S9+. Размер экрана у данного телефона 1440×2960 пикселей. Это физические пиксели. Они реально есть на этом экране. Их 1440 по ширине и 2960 по высоте. Всего 4262400. Запоминаем — это физические пиксели.
Далее, у нас есть виртуальные пиксели. С ними всё интересней. Виртуальный пиксель может быть таким же, как и физический. А может быть больше. И может быть меньше, но это уже редкость.
Представьте, что у нас есть блок div, которому мы задаём чёрную границу в 1 пиксель. В CSS это будет выглядеть так:
На обычном экране эта граница действительно будет иметь размер 1 пиксель. Тот самый случай, когда виртуальный пиксель равен физическому. Значит, DPR равен 1.
Но если мы возьмём Samsung Galaxy S9+ (как мы помним, там размер экрана 1440×2960 пикселей), то мы обнаружим, что на данном устройстве, если посмотреть внимательно-внимательно, граница будет не 1 пиксель, а целых 4. Выходит, в Samsung Galaxy S9+ DPR равен 4. Получается, что виртуальный пиксель увеличивается по отношению к физическому.
Тоже самое и с вёрсткой. Если Samsung Galaxy S9+ имеет 1440 физических пикселей по ширине, а его DPR как мы выяснили равен 4, то получается, что 1440px / 4 = 360px. Это виртуальная ширина устройства и стили будут загружаться именно для неё.
Получается, что DPR это соотношение виртуальных пикселей к физическим.
В старых смартфонах DPR был меньше единицы, например, 0.75. В зависимости от дисплея DPR может быть 1.5, может быть 2, или 2.25, или 2.5, или 3. Вариантов, как и размеров дисплеев — много! Но обычно графику подготавливают для DPR 1x, 1.5x, 2x, 2.5x, 3x, 3.5x и 4x. Если лень, то можно для 1x, 2x, 3x, 4x. Браузер сам выберет, что загружать!
К стати, DPR применяется не только в мобильных телефонах. В ноутбуках, планшетах, мониторах и телевизорах тоже есть физические и виртуальные пиксели. И не всегда в них соотношение равно 1.
Узнать DPR на Вашем устройстве можно здесь.
Тут то и стоит рассказать про DPR — Device Pixel Ratio.
Смотрите, как интересно. С одной стороны у нас есть устройство с каким-то определённым физическим разрешением. Например, пусть это будет Samsung Galaxy S9+. Размер экрана у данного телефона 1440×2960 пикселей. Это физические пиксели. Они реально есть на этом экране. Их 1440 по ширине и 2960 по высоте. Всего 4262400. Запоминаем — это физические пиксели.
Далее, у нас есть виртуальные пиксели. С ними всё интересней. Виртуальный пиксель может быть таким же, как и физический. А может быть больше. И может быть меньше, но это уже редкость.
Представьте, что у нас есть блок div, которому мы задаём чёрную границу в 1 пиксель. В CSS это будет выглядеть так:
div {
border: 1px solid black;
}На обычном экране эта граница действительно будет иметь размер 1 пиксель. Тот самый случай, когда виртуальный пиксель равен физическому. Значит, DPR равен 1.
Но если мы возьмём Samsung Galaxy S9+ (как мы помним, там размер экрана 1440×2960 пикселей), то мы обнаружим, что на данном устройстве, если посмотреть внимательно-внимательно, граница будет не 1 пиксель, а целых 4. Выходит, в Samsung Galaxy S9+ DPR равен 4. Получается, что виртуальный пиксель увеличивается по отношению к физическому.
Тоже самое и с вёрсткой. Если Samsung Galaxy S9+ имеет 1440 физических пикселей по ширине, а его DPR как мы выяснили равен 4, то получается, что 1440px / 4 = 360px. Это виртуальная ширина устройства и стили будут загружаться именно для неё.
Получается, что DPR это соотношение виртуальных пикселей к физическим.
В старых смартфонах DPR был меньше единицы, например, 0.75. В зависимости от дисплея DPR может быть 1.5, может быть 2, или 2.25, или 2.5, или 3. Вариантов, как и размеров дисплеев — много! Но обычно графику подготавливают для DPR 1x, 1.5x, 2x, 2.5x, 3x, 3.5x и 4x. Если лень, то можно для 1x, 2x, 3x, 4x. Браузер сам выберет, что загружать!
К стати, DPR применяется не только в мобильных телефонах. В ноутбуках, планшетах, мониторах и телевизорах тоже есть физические и виртуальные пиксели. И не всегда в них соотношение равно 1.
Узнать DPR на Вашем устройстве можно здесь.