Это упоминается каждая статья о мобильной сети, но нигде я не могу найти объяснение того, что именно делает этот атрибут. Кто-нибудь может спросить, что такое запросы, подобные этой проверке?
@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
}
Соотношение пикселей устройства - это соотношение между физическими пикселями и логическими пикселями. Например, iPhone 4 и iPhone 4S сообщают о соотношении пикселей устройства 2, поскольку физическое линейное разрешение вдвое превышает логическое линейное разрешение.
Формула:
Где:
- физическое линейное разрешение
и
- это логическое линейное разрешение
Другие устройства сообщают о различных соотношениях пикселей устройства, включая нецелые. Например, 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, который прекрасно масштабируется для всех разрешений.
В мире веб-разработки соотношение пикселей устройства (также называемое CSS Pixel Ratio) - это то, что определяет, как разрешение экрана устройства интерпретируется CSS.
Браузер CSS вычисляет логическое (или интерпретируемое) решение по формуле:
Например:
Apple iPhone 6s
При просмотре веб-страницы CSS подумает, что устройство имеет экран разрешения 375x667, а Media Queries будут реагировать так, как если бы экран был 375x667. Но отображаемые элементы на экране будут в два раза более острыми, чем фактический экран 375x667, потому что на физическом экране в два раза больше физических пикселей.
Некоторые другие примеры:
Samsung Galaxy S4
iPhone 5s
Причина, по которой отношение CSS-пикселей было создано, заключается в том, что, поскольку экраны телефонов получают более высокие разрешения, если каждое устройство по-прежнему имеет отношение к пикселю CSS в 1, то веб-страницы будут отображаться слишком мало, чтобы видеть.
Типичный полноэкранный настольный монитор - это примерно 24 "с разрешением 1920x1080. Представьте, что этот монитор был сокращен до 5 дюймов, но имел такое же разрешение. Просмотр вещей на экране будет невозможно, потому что они будут такими маленькими. Но сейчас производители выпускают экраны с разрешением 1920x1080 пикселей.
Таким образом, соотношение пикселей устройства было изобретено производителями телефонов, чтобы они могли продолжать нажимать разрешение, резкость и качество экранов телефонов, не делая элементы на экране слишком маленькими, чтобы видеть или читать.
Вот инструмент, который также сообщает вам текущую плотность пикселей устройства:
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-устройства пиксел соотношение
Дает количество пикселей устройства на пиксель CSS.
это почти самоочевидно. число описывает отношение количества реальных пикселей (физических пикселов экрана) для отображения одного "виртуального" пикселя (размер устанавливается в CSS).
Статья Бориса Смуса Высокие изображения DPI для переменной плотности пикселей имеет более точное определение соотношения пикселей устройства: количество пикселей устройства на пиксель CSS это хорошее приближение, но не вся история.
Обратите внимание, что вы можете получить DPR, используемый устройством с window.devicePixelRatio.