Преобразование между физическими пикселями и пикселями CSS

Документация Mozilla от elementFromPoint объясняет, что координаты не находятся в физических пикселях, а "пиксели CSS". Точно, что такое пиксели CSS? У меня создалось впечатление, что пиксель в CSS был таким же, как и физический пиксель.

Если это не так, как конвертировать между физическими и CSS-пикселями?

Ответ 1

Пиксель является физическим пикселем экрана, поскольку любая веб-страница может разумно относиться к себе.

Формулировка "пиксель CSS" относится к пикселю как определенному в CSS 2

целого число пикселей устройства, которые лучше всего аппроксимирует опорный пиксель. Рекомендуется, чтобы опорный пиксель был визуальным углом одного пикселя на устройстве с плотностью пикселей 96dpi и расстоянием от считывателя длины руки. Таким образом, для номинальной длины руки 28 дюймов угол зрения составляет около 0,021 дюйма.

Это говорит о том, что пиксель CSS является пикселем устройства для обычных простых экранных случаев. Однако для специализированных экранов сверхвысоких разрешений, где ОС масштабирует свои обычные размеры на два, пиксель CSS может быть двумя пикселями устройства.

Теперь у нас есть функция масштабирования в большинстве браузеров, которая, естественно, изменит размер пикселя CSS (вместе со всеми другими единицами), чтобы он не соответствовал пикселю устройства.

Ответ 2

Как я уверен, вы знаете, CSS предоставляет несколько разных единиц для представления длины. Некоторые из них основаны на физических измерениях реального мира (дюймы, миллиметры, точки), в то время как другие относятся к чему-то еще (em width, percent).

Но пиксели не являются ни тем, ни другим. Первоначально они были (как вы предполагали) просто наименьшей адресной точкой на экране пользователя. Однако это проблематично по ряду причин:

  • Средство визуализации может фактически использовать подпиксельное позиционирование, чтобы избежать ошибок округления.
  • У выходного устройства могут отсутствовать пиксели - шрифт с десятью точками на принтере с разрешением 600 точек на дюйм вряд ли отразит то, что действительно хотел дизайнер.
  • Подобно печати, страницы, предназначенные для обычных дисплеев с низким разрешением (72-96 точек на дюйм), могут быть нечитаемыми на дисплеях с высоким разрешением.
  • Современные браузеры предлагают мощные инструменты для масштабирования/увеличения страниц.

И поэтому пиксели CSS являются полезной абстракцией: они имеют четко определенные отношения к другим измерениям (по крайней мере, в пределах данного браузера...), и поэтому разработчики страниц могут полагаться на результаты, которые выглядят достаточно близко к их проектам, даже когда браузер должен изменить отношение к фактическим пикселям устройства.

Чтобы ответить на второй вопрос, вы не конвертируете между физическими и CSS-пикселями. Это разрушило бы все это, уничтожив абстракцию, необходимую рендереру для правильной работы. Gecko предоставляет способ определить отношения, но только для хромовых скриптов - обычные веб-страницы должны оставаться блаженно не осведомленными...

Дальнейшее чтение: Units Patch Landed

Ответ 3

В большинстве случаев да, пиксели CSS такие же, как и физические пиксели. Согласно Спецификация CSS 2.1:

Пиксельные единицы относятся к разрешению устройства просмотра, то есть чаще всего к компьютеру. Если плотность пикселей устройства вывода сильно отличается от плотности изображения типичного дисплея компьютера, пользовательский агент должен масштабировать значения пикселей.

Как правило, 1 пиксель на устройстве будет таким же, как 1 пиксель в CSS. На устройстве с очень высокой плотностью пикселей вы можете обнаружить, что его размер пикселя CSS на самом деле составляет 2 физических пиксела в ширину, но я не знаю никаких устройств, которые это делают. Даже iPhone 4 со своим Retina Display не будет корректировать размер пикселя CSS.

Как указано Shog9, большинство функций масштабирования браузеров будут корректировать масштаб отображаемых пикселей, но в большинстве случаев пиксели CSS будут такими же, как и физическое устройство.