Что такое ширина устройства?

Question

Я читаю это quirksmode article. Несколько пунктов вниз, вы получите это:

Веб-разработчики ожидают screen.width/высота, чтобы дать количество физических пикселей на весь экран. Другой вариант, однако, составляет , что дает ширину и высоту идеального видового экрана; тот, который вы получите , при использовании width = device-width.

Что он имеет в виду width=device-width.

Answer 1

В принципе, device-width - это значение, которое может использоваться как целевое условие для запросов к мультимедиа. Выдержка относится к тому факту, что device-width не может вернуть фактическое физическое число пикселей, которое имеет устройство. Многие устройства возвращают «виртуальное» количество пикселей из-за их экранов с низкой или высокой плотностью пикселей. Хорошим примером устройств, демонстрирующих это поведение, являются iPhone и iPad с дисплеями Retina. Ferrrmolina написал хороший reference link which explains the phenomenon, в комментариях.

device-width ... ширина поверхности рендеринга выходного устройства. Для сплошных носителей это ширина экрана. ... Блок «px» имеет логический вид, как описано в разделе Units.

https://drafts.csswg.org/mediaqueries-3/#device-width

Что Причуды режим получает на отвечает красиво here, on MDN:

Для низких точек на дюйм устройства, блок ПВ представляет физический справочник пиксель, а остальные определяются по отношению к Это. Таким образом, 1in определяется как 96px, что равно 72pt. Следствием этого определения является то, что на таких устройствах длина, описанная в дюймах (дюймах), сантиметрах (см), миллиметров (мм) не обязательно соответствует длине физического устройства с таким же именем.

Для устройств с высоким разрешением на дюйм, дюймы (дюймы), сантиметры (см), миллиметры (мм) определяются как их физические аналоги. Поэтому единица px равна , определенной по отношению к ним (1/96 от 1 дюйма).