Detect Scale Settings (Dpi) with JavaScript or CSS

Detect scale settings (dpi) with JavaScript or CSS

Try accessing window.devicePixelRatio variable.

The Window property devicePixelRatio returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel. In simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.

More info about it: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

You could also use CSS resolution for this, more about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

How to access screen display’s DPI settings via javascript?

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. Update: I initially wrote this answer back in 2009, with my understanding of the current technologies. As @thure pointed out, you can now (since 2012?) use the window.matchMedia function to determine the DPI of the screen.

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.

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

Force Zoom-Level/DPI-Scale with CSS, Header-Tag or JavaScript

You can check the browser dpi level with javascript and zoom the page contents accordingly with css(if needed).

if(window.devicePixelRatio == 1 )
  $("body").addClass("zoom2x")

Where zoom2x is a css class.

.zoom2x{
      zoom: 200%; /* all browsers */
     -moz-transform: scale(2);  /* Firefox */
}

You may crosscheck your current dpi setting here and verify results.

How to detect the screen DPI using JavaScript

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
    dpi_x = document.getElementById('testdiv').offsetWidth;
    dpi_y = document.getElementById('testdiv').offsetHeight;
</script>

Then you can use JQuery to send dpi_x and dpi_y this to to your server

http://jsfiddle.net/sxfv3/

How to detect the screen resolution with JavaScript?

original answer

Yes.

window.screen.availHeight
window.screen.availWidth

update 2017-11-10

From Tsunamis in the comments:

To get the native resolution of i.e. a mobile device you have to multiply with the device pixel ratio: window.screen.width * window.devicePixelRatio and window.screen.height * window.devicePixelRatio. This will also work on desktops, which will have a ratio of 1.

And from Ben in another answer:

In vanilla JavaScript, this will give you the AVAILABLE width/height:

window.screen.availHeight
window.screen.availWidth

For the absolute width/height, use:

window.screen.height
window.screen.width

Detect screen resolution independently of page zoom level and Windows scale settings

This is an XY problem, OP doesn't want the screen resolution, but the one of the document.

---

Note for future readers.
There are chances that if you also are trying to get the actual screen resolution, you are yourself in some kind of an XY problem.

If what you want is sharp pixels, getting the actual screen resolution won't help you much.

Taking OP's example of a browser zoom of 75% itself scaled by the OS zoom at 150%, we get for a single white pixel,

• 1 white pixel x 0.75 => impossible to render. => anti-aliasing with surrounding pixels. So if we say that surrounding pixels were black, then we've now got a grayish pixel.

And this was only at the browser level... We still have to pass the OS zoom algorithm.

• 1 grayish pixel x 1.5 => impossible to render => anti-aliasing with surrounding pixels. And yet a new pixel, even farther from our original white.

---

The best we can do here is to set our canvas bitmap's size to the one reported by the browser. This way, only the OS zoom would kick in.

Note: You may want to try to detect high density screens a.k.a retina®, which are actually able to render pixels at sub-px level, in this case, you might try using window.devicePixelRatio as a general scaling factor, but remember to round it, since a floating scale would mean more antialiasing (no high density screen will ever use 2.3 pixels to render one px).

So to detect this document size, is an easy task, with multiple different ways of doing:

If you deal with hard-coded sizes in windowed mode, you can simply check for window.innerWidth and window.innerHeight when entering fullScreen:

_{Unfortunately, StackSnippets® iframe do not allow fullscreen mode...}

// listen for the resize event
window.onresize = function() {
  // if we are in fullscreen mode
  if (document.fullscreenElement === canvas) {
    // simply size our canvas to the reported innerWidth/innerHeight.
    W = canvas.width = window.innerWidth;
    H = canvas.height = window.innerHeight;
  }
  draw();
}
// in the fulscreenchange event
document.onfullscreenchange = function() {
    // if we are exiting the fullscreen mode
    if (!document.fullscreenElement) {
      // set  back to hard-coded values
      W = canvas.width = 500
      H = canvas.height = 200;
    }
    draw();
  }

Fiddle.

If you want something more dynamic, you could also make use of CSS to let you know the actual size. Indeed, you can resize your canvas through CSS, as long as you remember to set its bitmap's size to the displayed size.

// listen only for the resize event
window.onresize = function() {
  // set the canvas size to its own rendered size
  W = canvas.width = canvas.offsetWidth;
  H = canvas.height = canvas.offsetHeight;
  draw();
}

/* target only when in fullscreen mode */
canvas::fullscreen {
  width: 100vw;
  height: 100vh;
}
/* windowed mode */
canvas {
  width: 50vw;
  height: 50vh;
}

Fiddle.

---

Related Topics