Почему ширина видового экрана не соответствует фактической ширине экрана?

Question

Хром показывает, что моя ширина экрана составляет 1280 пикселей. Однако мое фактическое разрешение дисплея составляет 2560x1600 пикселей. Машина, которую я использую, - это 13,3-дюймовый macbook pro. Почему видовой экран не имеет ширину 2560 пикселей? Использование <meta name="viewport" content="width=device-width, initial-scale=1"> не имеет никакого значения.

мои настройки дисплея:

На самом деле, это не только Chrome, Safari показывает то же самое.

Answer 1

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

Просто визуализируйте 10-кратный размер div на странице, сделайте снимок и проверьте его в своем любимом программном обеспечении для редактирования растровых изображений: вы найдете 20 пикселей больших ... Я имею в виду 20 пикселей экрана.

Некоторые больше о Css пикселей и плотностью отображения:

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Try «Плотность пикселей дисплея CSS» в поисковой системе и наслаждаться ею.