Как отобразить 10 см в веб-браузере независимо от масштабирования? - PullRequest
Новая
       102

Как отобразить 10 см в веб-браузере независимо от масштабирования?

3 голосов
/ 26 мая 2020

У меня 27-дюймовый монитор 4k, и я хотел бы представить 10 см на веб-странице, как это представлено как реальное измерение в реальном мире.

Я использую Windows 10 с масштабированием, установленным на 175%. Chrome консоль devicePixelRatio также говорит: 1.75

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
  <div style="border: 1px solid red; width: 100mm; height: 10mm;">&nbsp;</div>
</body>
</html>

Если я измерю это по физическим правилам, это на самом деле 10,4 см на экране. Вероятно, есть некоторые отклонения в том, как перевести 10 см CSS на физическое устройство, но ладно, почти 10 см.

Я не понимаю, если я изменю масштабирование на 100%, тогда CSS 10cm измеряется 6cm физической линейкой. Прямоугольник меньше виден на экране. Я вышел из системы, даже перезапустил свой компьютер, но результат тот же.

Разве CSS 10cm не должно быть таким же, независимо от масштабирования, которое я установил для своего монитора в Windows Свойства дисплея?

enter image description here

I also briefly looked at this article: https://www.html5rocks.com/en/mobile/high-dpi/, в котором объясняется, как рассчитывается соотношение пикселей устройства и что с этим связано.

Даже если масштабирование составляет 100%, а devicePixelRatio равно 1, почему не браузер dr aws 10cm как на самом деле 10cm?

Я знаю историю devicePixelRatio:

Типичный полноэкранный настольный монитор составляет примерно 24 "при разрешении 1920x1080. Представьте, если бы этот монитор был уменьшен примерно до 5 дюймов, но имел такое же разрешение. Просмотр предметов на экране был бы невозможен, потому что они были бы такими маленькими. Но производители теперь последовательно выпускают экраны телефонов с разрешением 1920x1080.

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

Одним из решений может быть то, что пользователь вводит диагональ своего монитора в дюймах, и мы вручную вычисляем PPI (https://www.calculatorsoup.com/calculators/technology/ppi-calculator.php), но если CSS поддерживает mm, cm, должно ли это работать из коробки?

Я понимаю, что javascript не имеет поддержки API для получения диагонали монитора, но я предполагаю веб-браузер поддерживает.

...