Как получить доступ к настройкам DPI отображения на экране с помощью JavaScript? [дубликат]

Я бы создал локальную функцию, которая вычисляет общую стоимость из состояния вместо добавления уровня сложности в состояние. Я создал пример ниже. Вы можете использовать возвращаемое значение, чтобы сделать что угодно.

class App extends React.Component {
  state = {
    tomsWallet: 50,
    hannahsPurse: 49,
  }
  getTotalBalance = () => {
    return (this.state.tomsWallet + this.state.hannahsPurse).toFixed(2);
  }
  render() {
    return (
      <div>Total Balance: £{this.getTotalBalance()}</div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

48
задан Rémi Becheras 11 February 2016 в 21:19
поделиться

3 ответа

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

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

  1. собственные пиксели на дюйм дисплея (или видео). Это определяет, насколько маленький пиксели. У Вас может быть то же 1024x768 разрешение и на 14-дюймовом экране ноутбука и на 17-дюймовом ЖК-мониторе. Первый примерно был бы 1280/14 =, 91 DPI и последний примерно будут 1280/17 = 75 DPI. DPI экрана неизменен; это не может быть изменено с настройками дисплея. [Еще 110]...
  2. точки на дюйм подрисовали бумагу во время печати. Это - количество бок о бок точек, которые принтер/фотокопировальное устройство/факс может отпечатать на волосок от бумаги. Большинство принтеров может быть установлено для печати в более низком DPI, просто печатая каждую точку поскольку два, четыре, и т.д. точки. [Еще 111]...

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

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

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

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

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

36
ответ дан Charlie 26 November 2019 в 18:44
поделиться

Нет способа, которым я знаю о, однако, они могут быть альтернативным решением:

Указывают Ваши измерения в 'pt' и 'них', которые являются экранными метриками родственника.

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)
  • пк:
    цицеро (1 pc совпадает с 12 points)
4
ответ дан Goose 26 November 2019 в 18:44
поделиться

Похоже, вы можете использовать «экранный» 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;
}
39
ответ дан 26 November 2019 в 18:44
поделиться
Другие вопросы по тегам:

Похожие вопросы: