device pixel ratio что такое
Что такое DPR
Возможно, Вы замечали, что при вёрстке для мобильных устройств мы применяем стили не более 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.
Значение DOM «window.devicePixelRatio» и свойство CSS «device-pixel-ratio» станут переменными величинами
Более двух лет прошло после начала продаж iPhone 4 летом 2010 года, и за эти два года сайтостроители привыкли проверять джаваскриптом значение window.devicePixelRatio (или же использовать в CSS медиазапрос device-pixel-ratio) как простое и бесхитростное средство, позволяющее тотчас же выяснить, запущен ли сайт на сетчаточном дисплее (retina display) или нет. Если величина devicePixelRatio равна двойке, то перед нами сетчаточный дисплей (четвёртый iPhone, четвёртый iPod Touch, третий iPad, или более новые устройства, или портативный компьютер «MacBook Pro with Retina Display»); если же величина devicePixelRatio равна единице (или не определена), то перед нами дисплей обычной чёткости.
Чуть сложнее, по сравнению с эппловскими, бывает учёт устройств, работающих под Android: там приходится воспринимать дробные величины, не равные единице или двойке. сообщил во блогозаписи «More about devicePixelRatio» о том, что (по его наблюдениям) в Nexus One величина devicePixelRatio тогда как в Galaxy Nexus и в Galaxy Note она равна двум в WebKit в Opera Mobile.
Но эти мелкие отличия не меняют картины в целом: все привыкли думать о значении величины devicePixelRatio как о таком свойстве устройства, которое на одном и том же мобильнике (или планшете, или ноутбуке) остаётся беспрерывно постоянным. В частности, именно на этом были основаны все, все рецепты из хабрахабровских блогозаписей «Адаптируем графику под Retina экран», «Распознаём джаваскриптом», «Отображаем карты OpenStreetMap на iPhone 4 с учётом сетчаточного дисплея при помощи Leaflet», «Как отличить версию iPad в Safari», «Оптимизация графики », «Комплексная подготовка сайта к Retina» и им подобных.
Но пришёл ноябрь 2012 года, и настаёт пора отказаться от этой привычки, настаёт пора критически пересмотреть прежние рецепты. Сейчас скажу почему.
Первый звонок прозвенел, когда обновил свою блогозапись «More about devicePixelRatio» и написал в постскриптуме, что наблюдал воочию: значение devicePixelRatio во браузере Opera Mobile зависит от увеличения страницы (zoom).
Второй звонок прозвенел, когда поддержка devicePixelRatio появилась во браузере Firefox версии 18 — эта величина была там задана также в качестве зависящей от увеличения страницы.
Третий и последний звонок прозвенел, когда участники W3C в рамках списка рассылки в письмах на тему «Behavior of device-pixel-ratio under zoom» окончательно договорились (менее недели тому назад) о том, что значение devicePixelRatio определяется количеством физических (экранных) пикселов, приходящихся страницы — а как оно было достигнуто (внедрением ли сетчаточного дисплея или простым нажатием на клавиатуре), никого не должно беспокоить.
Всё, господа читатели. Можете навсегда позабыть о том, имеет постоянное значение, свойственное конкретному устройству. Это не правда — вернее, теперь это не всегда правда.
Понятно, что такая новость имеет две стороны — хорошую и плохую.
Наверное, не всех сайтостроителей обрадует, что прежние попытки опознать устройство по его значению devicePixelRatio не всегда будут удачными в будущем.
Наверное, не всех сайтостроителей обрадует, что раньше было достаточно считывать devicePixelRatio джаваскриптом в сáмом начале работы с документом (по событию load а теперь открывается возможность (а не то и необходимость) ещё повозёхаться, время от времени проверяя devicePixelRatio и по мере нужды подстраивая разрешение картинок к изменившемуся увеличению страницы, когда и если читатель его изменит.
С другой стороны, будет приятно. Раньше для получения из Интернета высокочёткой версии той или иной картинки было необходимо закупить дорогое эппловское оборудование с сетчаточным дисплеем, способным эту версию отобразить. А теперь достаточно пару раз на клавиатуре надавить — и с сайта скачается да отобразится изображение удвоенной ширины и удвоенной высоты, если, конечно, автор сайта не забыл джаваскриптом запрограммировать реакцию на изменение величины devicePixelRatio или поместить в CSS медиазапрос на основе device-pixel-ratio.
Можно надеяться, что в будущем именно этот нюанс сайтостроения ещё упростится, если будет принято февральское предложение о свойстве
Нельзя не упомянуть, что в WebKit его внедрили ещё в марте.
Это вдохновляет. Будущее начинает выглядеть лучезарным.
Обратите внимание, что теперь наряду с удвоением размера картинки возможным становится утроение, учетверение и так далее — по мере готовности читателя подкручивать увеличение и по мере готовности сайтостроителя обеспечить предоставление всё более крупных версий одной и той же иллюстрации.
Оптимизация графики для Retina-экранов
После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?
Для начала разберемся в терминологии.
Физические пиксели
Физические пиксели (device pixel или physical pixel) — привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость.
Плотность экрана (Screen density) — это количество физических пикселей дисплея. Обычно измеряется в пикселях-на-дюйм (PPI: pixels per inch). Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.
CSS-пиксели
CSS-пиксели (CSS pixels) — абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана (DIPs: device-independent pixels). Пример:
Такой блок на обычных экранах будет занимать область 200×300 пикселей, а на Retina-экранах тот же блок получит 400×600 пикселей.Таким образом, на Retina-экранах плотность пикселей в 4 раза больше, чем на обычных:
Соотношение между физическими и CSS-пикселями можно устанавливать так:
В Javascript добиться этого можно, используя
Растровые пиксели
Растровые пиксели (bitmap pixels) — самые маленькие части, составляющие растровое изображение (PNG, JPF, GIF и т.д.) Каждый пиксель содержит информацию, о цвете и расположении в системе координат изображения. В некоторых форматах пиксель может содержать дополнительную информацию, например, прозрачность.
Оптимизация
Существует несколько способов оптимизации графики для отображения на Retina-экранах. Каждый имеет и плюсы, и минусы, необходимо в каждом конкретном случае выбирать, что имеет больший приоритет: производительность, простота реализации, поддержка браузерами или какие-то другие параметры.
HTML и CSS-масштабирование
Самый простой способ подготовить графику к Retina-дисплею — это просто разделить пополам физические размеры изображения. Например, чтобы показать фотографию 200×300 пикселей на экране с увеличенной плотностью пикселов, необходимо загрузить фото размером 400×600 пикселей и уменьшить его, используя CSS-аттрибуты или HTML-параметры. Таким будет отображение на обычном экране:
А таким на Retina:
Есть несколько способов реализации HTML и CSS-масштабирования:
Самый простой способ — просто задать параметры width и height тегу img:
Где использовать: на одностраничных сайтах с несколькими изображениями.
Javascript
Такого же результата можно добиться, используя Javascript для того, чтобы делить пополам размеры изображений для Retina-экранов. С использованием библиотеки jQuery это выглядит так:
Где использовать: на сайтах с несколькими изображениями в контенте.
CSS (SCSS)
Также можно использовать изображение в качестве фона с необходимыми размерами (background-size) определенного div’а. Параметр background-size не поддерживается в IE 7 и 8.
Можно использовать псевдоэлементы :before или :after
Техника работает и при использовании спрайтов:
Где использовать: на сайтах с ограниченным количеством фоновых изображений (например одним в качестве спрайта).
HTML и CSS-масштабирование: плюсы
HTML и CSS-масштабирование: минусы
Определение плотности пикселей экрана
Возможно это самый популярный способ оптимизации графики для Retina-дисплеев. Используется CSS или Javascript.
В этом способе используется device-pixel-ratio, чтобы установить нужное соотношение между физическими и CSS-пикселями:
Где использовать: на сайтах или в приложениях, в которых применяется background-image для элементов дизайна. Не подходит для изображений внутри контента.
Плюсы
Минусы
Javascript
Того же результата можно добиться, используя window.devicePixelRatio:
Существует специальный Javascript плагин Retina.js, который умеет делать все вышеописанное, но с дополнительными возможностями, такими как пропуск внешних изображений и пропуск внутренних, но не имеющих retina-копий.
Где использовать: на любых сайтах с изображениями в контенте.
Плюсы
Минусы
Масштабируемая векторная графика
Вне зависимости от используемого метода растровые изображения по своей природе остаются ограниченными в масштабировании. Тут нам может помощь векторная графика. SVG (Scalable Vector Graphics) формат на основе XML поддерживается большинством браузеров. Самый простой способ использования SVG-изображений — в теге img или CSS-параметрами background-image и content:url().
В этом примере простое SVG-изображение может быть как угодно масштабировано:
То же самое получится с применением CSS:
Для поддержки IE 7 или 8 и Android 2.x потребуется использование заменяющих PNG-изображений. Это можно легко сделать с помощью Modernizr:
Для лучшей кроссбраузерности, чтобы избежать проблем растеризации в Firefox и Opera, следует сделать каждое SVG- изображение соответствующим его родительскому HTML-элементу.
В HTML можно реализовать аналогичное с помощью нужного data в теге a:
С использованием jQuery и Modernizr:
Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.
Плюсы
Минусы
Иконочные шрифты
Популярный благодаря Twitter Botstrap способ, заключается в замене букв в шрифте на нужные символы с последующим их отображением на странице с помощью CSS. Существует множество иконочных шрифтов с символами на любой вкус, но можно также создать свой с помощью Fontello, Font Builder или даже Inkscape.
Наиболее распространенный способ использования иконочных шрифтов — это применение нужного класса к определенному элементу страницы:
А в стилях указывается нужный шрифт:
Таже можно использовать псевдоэлемент :before и параметр content с уникальным классом к каждой иконке:
Где использовать: на сайтах с большим количеством иконок и для быстрого прототипирования.
Плюсы
Минусы
Favicon
Взгляд в будущее
Но этот способ не распространяется на изображения внутри тега img.
Еще один инструмент — Picturefill, автор Scott Jehl. Это HTML и Javascript решение:
Несмотря на такую разметку, это вполне нормальное кроссбраузерное решение.
Еще одно амбициозное предложение — использование элемента picture, который позволяет использовать несколько адаптивных изображений, заменяющих друг друга в зависимости от размера и плотности пикселей экрана
Про retina и @media
Retina — это зарегистрированный компанией Apple товарный знак. Под эти знаком выпускаются дисплеи (включая дисплеи мобильных устройств) с очень высоким разрешением экрана и маленьким размером пикселей. Сейчас это название «приклеилось» просто ко всем таким дисплеям.
Подобное высокое разрешение создало ряд проблем, включая веб-разработку: 100 физических пикселей на обычном экране и на Retina будут иметь абсолютно разный размер. Чтобы сайты не превратились в крошечные квадратики, а расцвели красками на Retina, было принято простое решение: теперь пиксели делятся на логические и физические.
Логические пиксели, это как раз те пиксели, которые фигурируют в разметке, и они не обязаны совпадать с физическими, которые их будут отображать. На классических Retina-дисплеях каждому логическому пикселю соответствует квадрат 2×2 физических пикселей.
Таким образом, данный блок:
на обычных дисплеях будет иметь размер 100×100 физических пикселей, а на экранах Retina — 200×200 пикселей.
А вот теперь начинаются проблемы
Особенно, если это не просто блок, а картинка, и причём растровая:
Данная картинка будет иметь размер 100×100 физических пикселей на обычных дисплеях, и целых 200×200 физических пикселей при разрешении всего 100×100. Такие изображения будут «размытыми». Предположим, что мы поставили разрешение 200×200:
Да, теперь на Retina-экранах картинка выглядит превосходно, но при открытии на обычных устройствах мы будем загружать ненужные данные. И что же делать?
Выход есть — @media-запросы!
Оставим читателям вопрос, почему здесь фигурируют dpi. Но это запрос работает для Retina-устройств. И данный сайт прекрасно будет смотреться и достаточно быстро загружаться.
Что ещё?
Существуют также устройства с промежуточным количеством пикселей на один логический. Более того, этому помогают опции масштабирования как в самом браузере, так и операционной системе. Поэтому правильный работающий @media-query выглядит немного иначе:
Заключение
Собственно, всех этих штук вполне достаточно для красивого отображения сайта на подобных устройствах. Ну и с использованием CSS-препроцессоров этот @media-query можно вынести в константу и код выглядит уже не таким страшным.
Например, с less всё будет выглядеть таким образом:
Есть вопрос? Напишите в комментариях!
что такое соотношение пикселей устройства?
это упоминается в каждой статье о mobile web, но нигде я не могу найти объяснение того, что именно делает этот атрибут мерой.
Может ли кто-нибудь уточнить, что делает такие запросы, как эта проверка?
4 ответов
короткий ответ:
отношение пикселей устройства-это отношение между физическими пикселями и логическими пикселями. Например, iPhone 4 и iPhone 4S сообщают о соотношении пикселей устройства 2, поскольку физическое линейное разрешение вдвое превышает логическое линейное разрешение.
— это физическое линейное разрешение
логическое линейное разрешение
другие устройства сообщают о различных соотношениях пикселей устройства,включая нецелые. Например, Nokia Lumia 1020 сообщает 1.6667, Samsumg Galaxy S4 сообщает 3, а Apple iPhone 6 Plus сообщает 2.46 (источник: dpilove). Но это ничего не меняет в принцип, как вы никогда не должны проектировать для любого конкретного устройства.
Обсуждение
CSS «пиксель» даже не определяется как «один элемент изображения на некотором экране», а скорее как нелинейное угловое измерение of угол обзора, который составляет примерно дюйма на расстоянии вытянутой руки. источник: CSS абсолютные длины
это имеет много последствий, когда дело доходит до веб-дизайна, таких как подготовка ресурсов изображений высокой четкости и тщательное применение различных изображений при различных соотношениях пикселей устройства. Вы не хотите заставлять устройство низкого уровня загружать изображение с очень высоким разрешением, только для его локального снижения. Вы также не хотите, чтобы высококачественные устройства для масштабирования изображений с низким разрешением для размытого пользовательского интерфейса.
если вы застряли с растровыми изображениями, чтобы приспособить для различных соотношений пикселя устройства, вы должны использовать Media-запросы CSS в предоставление различных наборов ресурсов для различных групп устройств. Объедините это с хорошими трюками, такими как background-size: cover или явно указать background-size к процентным значениям.
пример
таким образом, каждый тип устройства загружает только правильный ресурс изображения. Также имейте в виду, что px блок в CSS всегда работает на логические пиксели.
случай для вектора графика
Если вам нужны четкие изображения для иконок, line-art, элементов дизайна, которые не, вам нужно начать думать о SVG, который прекрасно масштабируется для всех разрешений.
соотношение пикселей устройства = = соотношение пикселей CSS
CSS браузера вычисляет логическое (или интерпретируемое) разрешение устройства по формуле:
Apple iPhone 6s
при просмотре веб-страницы CSS будет думать, что устройство имеет разрешение 375×667 экран и медиа-запросы будут отвечать, как если бы экран 375×667. Но отображаемые элементы на экране будут в два раза резче, чем фактический экран 375×667, потому что в физическом в два раза больше физических пикселей экран.
Samsung Galaxy S4
iPhone 5s
почему существует соотношение пикселей устройства?
причина, по которой было создано соотношение пикселей CSS, заключается в том, что, поскольку экраны телефонов получают более высокое разрешение, если каждое устройство все еще имеет соотношение пикселей CSS 1, то веб-страницы будут слишком малы, чтобы видеть.
типичным полноэкранным настольным монитором является примерно 24″ с разрешением 1920×1080. Представьте, что этот монитор был уменьшен до 5″, но имел то же разрешение. Просмотр вещей на экране был бы невозможен, потому что они были бы такими маленькими. Но теперь производители выходят с экранами телефонов с разрешением 1920×1080.
таким образом, соотношение пикселей устройства было изобретено производителями телефонов, чтобы они могли продолжать нажимать разрешение, резкость и качество экранов телефонов, не делая элементы на экране слишком маленькими, чтобы видеть или читать.
вот инструмент, который также сообщает вам пиксель вашего текущего устройства плотность:
— moz-устройство-пиксель-отношение
Дает количество пикселей устройства на пиксель CSS.
Это почти самоочевидны. число описывает отношение того, сколько «реальных» пикселей (физических пикселей экрана) используется для отображения одного «виртуального» пикселя (размер, установленный в CSS).
статья Бориса Смуса высокие изображения DPI для переменных плотностей пикселей имеет более точное определение отношения пикселей устройства: количество пикселей устройства на пиксель CSS является хорошим приближением, но не всей историей.