#html #macos #pixel #resolution #screen-resolution
#HTML #macos #пиксель #разрешение #разрешение экрана
Вопрос:
У меня на моем MacBook разрешение 2560 x 1600 пикселей, и когда я создаю div с параметрами размера, вдвое меньшими моего разрешения (т. Е. 1280 x 800) Я ожидаю, что мой браузер будет использовать половину поверхности экрана, но вместо этого он показывает увеличенный объект, как я могу это исправить?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="height: 800px; width: 1280px; background-color: cyan;">
</div>
</body>
</html>
Ответ №1:
Это связано с соотношением пикселей устройства: если DPR равно 2 (как для большинства дисплеев retina), каждый «пиксель CSS» (т. Е. настройки пикселей, которые вы задаете в CSS) в 2 раза шире и выше в пикселях устройства, что обеспечивает более точное разрешение векторной графики (включая шрифты). Таким образом, вам нужно разделить реальные результирующие значения устройства на это число, чтобы получить соответствующее значение пикселя CSS.
В медиа-запросах вы также можете использовать пиксели устройства, но не в обычных правилах CSS.
Еще немного информации здесь:https://hacks.mozilla.org/2013/09/css-length-explained /
Ответ №2:
Пожалуйста, проверьте масштаб отображения / уровень масштабирования. Совет: вы можете использовать vh и vw в css, если хотите масштабировать свой div относительно нашего размера экрана. 100vh имеет полную ширину.