Как получить доступ к экрану отображает настройки DPI через javascript?

Ответ 1

Во-первых, чтобы помочь с возможной (и очень распространенной) путаницей с термином DPI (точки на дюйм):

DPI не является частью "настроек дисплея". Он (неверно) используется в двух разных контекстах:

• Нативные пиксели на дюйм дисплея (или видео). Он определяет, насколько малы пиксели. Вы можете иметь такое же разрешение 1024x768 как на 14-дюймовом экране ноутбука, так и на 17-дюймовом ЖК-мониторе. Первый будет примерно равным 1280/14 = 91 DPI, а последний будет примерно равным 1280/17 = 75 DPI. DPI экрана неизменен; он не может быть изменен с помощью настроек дисплея. Подробнее...
• Точки на дюйм, нарисованные на бумаге во время печати. Это число бок о бок точек, которые принтер/копировальный аппарат/факс может отпечатать в дюйме бумаги. Большинство принтеров можно настроить для печати на более низком DPI, просто распечатав каждую точку в виде двух, четырех и т.д. Точек. Подробнее...

При печати изображения существует множество вещей, которые влияют на конечные размеры изображения на бумаге:

• Размеры исходного изображения - это количество пикселей или данных.
• DPI исходного изображения. Это значение определяет, как измерения должны интерпретироваться при печати изображения.
• Если исходное изображение не имеет встроенной информации DPI (в формате JPEG может быть один, GIF никогда не будет), программа, которая используется, может иметь настройки для указания DPI. Это может быть просмотрщик/редактор изображений или даже веб-браузер.
• Коэффициент масштабирования, который обычно указывается в диалоговом окне печати. ​​
• Текущая настройка DPI принтера.
• Физический (максимальный) DPI принтера.

Суть в том, что изображение, которое вы печатаете, будет эффективно получать повторно (уменьшено или увеличено), чтобы соответствовать окончательному DPI, который использовался в процессе печати. Любая из сторон может вызвать это (программа, драйвер печати, принтер).

Теперь вернемся к вашему вопросу. Нет, вы не можете определить DPI экрана, потому что это не в домене программного обеспечения. Это термин аппаратного домена, описывающий, насколько большой пользователь может купить пользователь. Обновление: Я изначально написал этот ответ еще в 2009 году с моим пониманием существующих технологий. Как уже указывал @thure, теперь вы можете (начиная с 2012 года) использовать функцию window.matchMedia для определения DPI экрана.

Если вы пытаетесь добиться точности печати макета HTML, как предложили другие, ваш CSS должен использовать параметры печати, такие как em, pt или pc вместо px. Однако конечный результат может по-прежнему зависеть от использования браузера. Если преобразование HTML в PDF (или создание PDF с нуля) является для вас вариантом, печать PDF даст вам самый верный WYSIWYG как на экране, так и на бумаге.

• Непонимание о dpi
• DPI, PPI, пиксели - факты и ошибки

Ответ 2

Похоже, вы можете использовать "экранный" DOM-объект в IE, у него есть свойства для deviceXDPI, deviceYDPI, logicXDPI, logicYDPI.

https://www.w3schools.com/jsref/obj_screen.asp

Вот решение от http://www.webdeveloper.com/forum/showthread.php?t=175278 (я не пробовал, похоже, полный взлом :) Просто создайте что-то шириной 1 дюйм и измерьте его в пикселях!

HTML:

<div id="dpi"></div>

Стиль:

#dpi {
  height: 1in;
  left: -100%;
  position: absolute;
  top: -100%;
  width: 1in;
}

Javascript:

function getDPI() {
  return document.getElementById("dpi").offsetHeight;
}

Ответ 3

Вы можете использовать свойство window.devicePixelRatio, чтобы получить коэффициент масштабирования экрана/страницы. Это хорошо работает в текущих IE, Edge, Chrome и Firefox на рабочем столе (Windows), но, похоже, это не настоящий стандарт. Он возвращает 1 на моем настольном ПК с обычным монитором и 2 на поверхности с 200% масштабированием. Значения должны быть в диапазоне от 1.0 до 3.0 в эти дни. Я мог бы использовать это для коррекции размера динамического изображения, чтобы обеспечить более четкое изображение на экранах с высоким разрешением.

Если вам понадобится несколько логических dpi/ppi, умножьте это значение на 96. Это не будет фактическое физическое ppi, а именно то, что ОС относится к нему как.

Ответ 4

Однако я не знаю, как это может быть альтернативное решение:

Укажите ваши измерения в 'pt' и 'em', которые являются относительными метриками экрана.

http://www.w3schools.com/cssref/css_units.asp

https://css-tricks.com/the-lengths-of-css/

• эм:
  1em равен текущему размеру шрифта. 2em означает в 2 раза размер текущего шрифта. Например, если элемент отображается с шрифтом 12 pt, то '2em' равен 24 pt. 'em' - очень полезный элемент в CSS, поскольку он может автоматически адаптироваться к шрифту, который использует читатель.
• пт:
  точка (1 pt совпадает с 1/72 inch)
• рс:
  pica (1 pc совпадает с 12 points)

Ответ 5

$(document).ready(function(){
        $("body").append("<div style='poosition:fixed;width:1cm;height:1cm;'class='SCREENDPITEST'></div>")
        screen.dpi = Math.floor($(".SCREENDPITEST").width() * 2.54);
    	$(".SCREENDPITEST").remove()
        document.write(screen.dpi)
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>