Блог

Этот вопрос предполагает: пикселы устройства являются абсолютными (фиксированными, не относящимися ни к чему).

После прочтения этой статьи,

1. Мое устройство (MacBook Pro 2019) имеет соотношение пикселей 2 (2 пикселя устройства в каждом пикселе CSS при 100%-ном масштабировании; рассчитывается .devicePixelRatio ). При 100%-ном увеличении пиксели CSS (измеренные с помощью .innerWidth ) совпадают с пикселями устройства (измеренными с помощью screen.width amp; Cmd Shift 4 click ). Я ожидал, что пиксели CSS будут равны половине значения пикселей устройства.

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

В вашем случае масштабирование выполняется на уровне ОС, поэтому все будет «лежать», потому что ваша ОС настроена на ложь для всех приложений, включая браузеры.

window.screen.width Значение будет тем, которое сообщает ваша операционная система, но в ваших системных настройках указано, что вы хотите, чтобы разрешение вашего дисплея было установлено на половину его реального разрешения, вот что вы получите.

Таким образом, даже эти значения не являются пикселями устройства, а какими-то пикселями CSS (ну window.screen.width это действительно «пиксели CSS», а те, что из приложения для скриншотов, нет).

Однако, хотя он «лжет» о количестве пикселей, он правильно отображает плотность пикселей (количество физических пикселей, используемых на px ). Это то, что вы получите в window.devicePixelRatio , когда браузер сам не применяет масштабирование. К сожалению, мы не знаем, когда браузер применяет такое масштабирование, поэтому, будучи веб-разработчиками, мы не можем знать плотность пикселей ОС или истинное разрешение устройства.

Что касается второго пункта, я предполагаю, что вы спросили, почему MDN говорит, что пиксели CSS являются абсолютными, а не относительными, как написано в вашем вопросе.

Это не означает, что пиксель CSS всегда будет иметь одинаковый выводимый физический размер _{(что, кстати, невозможно, подумайте о видеопроекторе)}, это контрастирует с относительными длинами, такими как % , em , vw и т.д. которые относятся к другой длине.

Пиксели CSS являются абсолютными в том смысле, что они не зависят от какой-либо другой длины, даже если физический вывод может отличаться.