Can you access sceen display’s DPI settings in a Javascript function?

Question

Is there a way to access the screen display's DPI settings in a Javascript function?

I am trying to position a html panel on the page and when the user's DPI is set to large (120), it throws the position off. I need to be able to know what the DPI is so I can adjust the position accordingly.

Thanks everyone,

Jeff

Answer 1

No that i know off. But you can check browser window size

Answer 2

There isn't a way that I know of, however, they may be an alternative solution:

Specify your measurements in 'pt' and 'em', which are screen relative metrics.

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

• em:
  1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
• pt:
  point (1 pt is the same as 1/72 inch)
• pc:
  pica (1 pc is the same as 12 points)

Answer 3

Firstly, to help with the possible (and very common) confusion with the term DPI (dots per inch):

DPI isn't exactly a part of "display settings". It's (mis)used in two different contexts:

1. The native pixels per inch of a display (or video). It determines how small the pixels are. You can have the same 1024x768 resolution on both a 14" laptop screen and a 17" LCD monitor. The former would roughly be 1280/14 = 91 DPI and the latter would roughly be 1280/17 = 75 DPI. The DPI of a screen is immutable; it can't be changed with display settings. More...
2. The dots per inch painted on paper during printing. This is the number of side-by-side dots a printer/photocopier/fax machine can imprint within an inch of paper. Most printers can be set to print at a lower DPI, by just printing each dot as two, four, etc. dots. More...

When printing an image, there are many things that affect the final dimensions of the image on paper:

• The dimensions of the source image -- this is the amount of pixels or data there is.
• The DPI of the source image. This value determines how the dimensions should be interpreted when printing the image.
• If the source image doesn't have embedded DPI information (a JPEG can have one, a GIF never does), the program that's being used may have settings to specify a DPI. This could be an image viewer/editor or even a web browser.
• The zoom factor that's typically specified in a print dialog.
• The current DPI setting of the printer.
• The physical (max) DPI of the printer.

The bottom line is, the image that you're printing will effectively get resampled (reduced or enlarged) to match the final DPI that's used in the print process. Any of the parties involed may be causing this (the program, the print driver, the printer).

Now, coming back to your question. No, you can't determine the DPI of the screen, because it's not in software domain. It's a hardware domain term, describing how large a monitor a user could afford to buy.

If you're trying to achieve precision in printing an HTML layout, as others have suggested, your CSS should use print dimensions like em, pt or pc instead of px. However, the final outcome might still depend on the browser using. If converting your HTML to PDF (or generating PDF from scratch) is an option for you, printing a PDF would give you the truest WYSIWYG both on screen and paper.

Also see:

• Misunderstandings about dpi
• DPI, PPI, Pixels - Facts and Fallacies

Answer 4

Looks like you can use the 'screen' DOM object in IE, its got properties for deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI.

hxxp://www.w3schools.com/htmldom/dom_obj_screen.asp

Here's a solution from http://www.webdeveloper.com/forum/showthread.php?t=175278 (i havent tried it, seems like a total hack :) Just create something 1 inch wide and measure it in pixels!

HTML:

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

Style:

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

Javascript:

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