Изучите эту демонстрацию
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
- Перезагрузите страницу с помощью разных устройств, чтобы увидеть, как браузер загружает разные изображения.
Для этого можно использовать эмулятор устройства. Если вам нужна определенная плотность дисплея, попробуйте следующие устройства:
1x плотность | Blackberry Playbook, множество внешних мониторов |
2x плотность | iPad или iPhone 5/6 |
3-кратная плотность | Галактика S5 или iPhone X |
- Проверьте
index.html
чтобы найти код, который заставляет это работать.
Как это работает?
Концепция дескрипторов плотности может быть незнакома большинству людей. Чтобы лучше их понять, полезно иметь некоторое представление о том, как браузер работает с пикселями.
Что такое пиксели
Начнем с самого начала, определив, что такое пиксель. Звучит просто, но на самом деле слово «пиксель» может иметь много значений:
- Пиксель устройства (он же «физический пиксель»)
- Наименьшая цветная точка, которую можно отобразить на устройстве.
- Логический пиксель
- Информация, определяющая цвет в определенном месте сетки. Этот тип пикселя не имеет собственного физического размера.
- CSS-пиксель
- Спецификация CSS определяет пиксель как единицу физического измерения. 1 пиксель = 1/96 дюйма.
Плотность пикселей
Плотность пикселей (также называемая «плотностью экрана» или «плотностью дисплея») измеряет плотность пикселей устройства в заданной физической области . Обычно это измеряется в пикселях на дюйм (ppi).
В течение многих лет плотность дисплея 96 пикселей на дюйм была очень распространенной (следовательно, CSS определял пиксель как 1/96 дюйма). Начиная с 1980-х годов это было разрешение Windows по умолчанию. Кроме того, это было разрешение ЭЛТ-мониторов .
Ситуация начала меняться, когда в 2000-х годах светодиодные мониторы стали обычным явлением. В частности, Apple произвела большой фурор в 2010 году, когда представила дисплеи Retina. Эти дисплеи имели минимальное разрешение 192 точек на дюйм, что вдвое превышало разрешение «обычных» дисплеев (192 точек на дюйм/96 точек на дюйм = 2).
окно.devicePixelRatio
С появлением новой технологии отображения «пиксели устройства» начали различаться по физическому размеру и форме и больше не имели такого же размера, как «пиксели CSS». Необходимость определить взаимосвязь между размером «пикселей устройства» и «пикселей CSS» привела к введению devicePixelRatio
(иногда называемого «Соотношение пикселей CSS»).
devicePixelRatio
определяет взаимосвязь между пикселями устройства и пикселями CSS для конкретного устройства. Устройство с разрешением 192 пикселей на дюйм имеет значение devicePixelRatio
, равное 2 (192 пикселей на дюйм/96 пикселей на дюйм = 2), поскольку «2 пикселя его дисплея имеют размер 1 пикселя CSS».
В наши дни большинство устройств имеют соотношение пикселей устройства от 1,0 до 4,0.
Определите плотность пикселей устройства, набрав в консоли
window.devicePixelRatio
.Просмотрите эту таблицу , чтобы узнать соотношение пикселей распространенных устройств. Большинство из них находятся в диапазоне от 1,0 до 4,0.
Так как же на самом деле применить эту информацию?
Размер изображений на основе соотношения пикселей устройства
Чтобы изображения выглядели наилучшим образом на экранах с высоким разрешением, необходимо предоставить разные версии изображений для разных devicePixelRatios
.
Соотношение пикселей устройства | Указывает на то, что: | На этом устройстве тег <img> с шириной CSS 250 пикселей будет выглядеть лучше всего, когда исходное изображение... |
---|---|---|
1 | 1 пиксель устройства = 1 пиксель CSS | 250 пикселей в ширину |
2 | 2 пикселя устройства = 1 пиксель CSS | 500 пикселей в ширину |
3 | 3 пикселя устройства = 1 пиксель CSS | 750 пикселей в ширину |
Что следует отметить:
- Размеры в пикселях, указанные в редакторах изображений, каталогах файлов и других местах, представляют собой измерение логических пикселей.
- Для экранов с более высоким разрешением и больших дисплеев вам потребуются изображения большего размера. Простое увеличение изображений меньшего размера противоречит цели обслуживания нескольких версий изображений. Браузер в любом случае сделал бы это, если бы не было предоставлено изображение с высоким разрешением.
Используйте дескрипторы плотности для обслуживания нескольких
изображения
Дескрипторы плотности в сочетании с атрибутом «srcset» могут использоваться для предоставления разных изображений разным устройствамPixelRatio.
- Взгляните на файл
index.html
и обратите внимание на элемент<img>
.
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
Этот пример выразил словами:
-
1x
,2x
и3x
— это дескрипторы плотности, которые сообщают браузеру плотность пикселей, для которой предназначено изображение. Это избавляет браузер от необходимости загружать изображение для определения этой информации. - Браузер может выбирать между тремя изображениями:
flower-1x.jpg
(предназначен для браузеров с плотностью пикселей1.0
),flower-2x.jpg
(предназначен для браузеров с плотностью пикселей2.0
) иflower-3x.jpg
(предназначен для браузеров). с плотностью пикселей3.0
). -
flower.jpg
— это резервное изображение для браузеров, которые не поддерживаютsrcset
.
Как это использовать:
- Используйте devicePixelRatio и единицу
x
для записи дескрипторов плотности. Например, дескриптор плотности для многих экранов Retina (window.devicePixelRatio = 2
) будет записываться как2x
. - Если дескриптор плотности не указан, предполагается, что он равен
1x
. - Включение дескрипторов плотности в имена файлов является общепринятым соглашением (оно поможет вам отслеживать файлы), но не является обязательным. Изображения могут иметь любое имя файла.
- Нет необходимости включать атрибут
sizes
. Атрибутsizes
используется только с дескрипторами ширины.