это упоминается в каждой статье о мобильном Интернете, но нигде я не могу найти объяснение того, что именно измеряет этот атрибут.
Может кто-нибудь, пожалуйста, уточните, что делает такие запросы, как эта проверка?
@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 «пиксель» даже не определен как «один элемент изображения на экране какого - то», а скорее в качестве нелинейного углового измерения от угла обзора, который составляет примерно
дюйм на расстоянии вытянутой руки. Источник: 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, который прекрасно масштабируется для всех разрешений.
background-image, вы можете объединить его с -webkit-background-size:50%, потому что в противном случае размер изображения будет соответствовать количеству логических пикселей. w3.org/TR/2002/WD-css3-background-20020802/#background-size
background-sizeхитрость для оптимального использования дисплея.
В мире веб-разработок соотношение пикселей устройства (также называемое CSS Pixel Ratio) определяет то, как разрешение экрана устройства интерпретируется CSS.
CSS браузера рассчитывает логическое (или интерпретированное) разрешение устройства по формуле:
Например:
Apple iPhone 6s
При просмотре веб-страницы CSS будет думать, что устройство имеет экран с разрешением 375x667, а Media Queries будет отвечать так, как если бы экран был 375x667 . Но визуализированные элементы на экране будут в два раза четче, чем реальный экран 375x667, потому что физических пикселей на физическом экране в два раза больше.
Некоторые другие примеры:
Самсунг гэлакси с4
айфон 5с
Причина, по которой было создано соотношение пикселей в CSS, заключается в том, что, поскольку экраны телефонов получают более высокие разрешения, если бы у каждого устройства оставалось соотношение пикселей в CSS, равное 1, веб-страницы отображались бы слишком маленькими для просмотра.
Типичный полноэкранный настольный монитор составляет примерно 24 "при разрешении 1920x1080. Представьте, что этот монитор был уменьшен до 5", но имел то же разрешение. Просмотр вещей на экране был бы невозможен, потому что они были бы такими маленькими. Но производители выпускают экраны телефонов с разрешением 1920x1080 постоянно.
Таким образом, соотношение пикселей устройства было изобретено производителями телефонов, чтобы они могли продолжать увеличивать разрешение, резкость и качество экранов телефонов, не делая элементы на экране слишком маленькими, чтобы их можно было увидеть или прочитать.
Вот инструмент, который также сообщает вам плотность пикселей вашего текущего устройства:
width: 100%будет иметь полную ширину экрана. Это не будет растягиваться. Экран «думает», что это дисплей с разрешением 300 пикселей. Изображения отображаются в соответствии с логическим / CSS разрешением. Теперь, в вашем примере, вы также можете использовать изображение размером 600 пикселей. Это будет полная ширина логического дисплея в 300 пикселей, но, поскольку ваш дисплей имеет исходные 600 пикселей, изображение будет выглядеть в два раза чище, чем исходное изображение в 300 пикселей. Изображение большего размера, но выглядит лучше, поскольку на дисплее есть все лишние пиксели. Это идея «Retina Displays».
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-device-pixel-ratio
Предоставляет количество пикселей устройства на пиксель CSS.
это почти самоочевидно. число описывает отношение того, сколько «реальных» пикселей (физических пикселей экрана) используется для отображения одного «виртуального» пикселя (размер установлен в CSS).
Статья Бориса Смуса Изображения с высоким разрешением и переменной плотностью пикселей разрешением дает более точное определение соотношения пикселей устройства: количество пикселей устройства на пиксель CSS является хорошим приближением, но не всей историей.
Обратите внимание, что вы можете получить DPR, используемый устройством с window.devicePixelRatio.
width=device-widthя растяну его на весь экран?