How to Override Device Pixel Ratio

window.devicePixelRatio change listener

I took the IMO best answer (by @Neil) and made it a bit more human-readable:

function listenOnDevicePixelRatio() {
  function onChange() {
    console.log("devicePixelRatio changed: " + window.devicePixelRatio);
    listenOnDevicePixelRatio();
  }
  matchMedia(
    `(resolution: ${window.devicePixelRatio}dppx)`
  ).addEventListener("change", onChange, { once: true });
}
listenOnDevicePixelRatio();

No fixed boundary or variables needed.

How to simulate pixel ratio to test media queries with Google Chrome or Firefox on Windows?

about:config hack on Firefox

You actually can using Firefox:

1. Go to "about:config"
2. Find "layout.css.devPixelsPerPx
3. Change it to your desired ratio (1 for normal, 2 for retina, etc.)

Refresh your page - boom, your media query has now kicked in! Hats off to Firefox for being awesome for web developing!

This was done on Windows 7 with Firefox 21.0.

Zooming on Firefox & Edge

Currently on Firefox and Edge, if you zoom it triggers dppx-based media queries. So this easier approach may be sufficient, but be aware that the functionality is reported as a "won't fix" bug for Firefox, so this could change.

Can devicePixelRatio be less than 1

DPR can be less than 1, if you set browser zoom to less than 100%. For a zoom factor of 50%, DPR would be 0.5.

Adjust browser zoom to below 100% and run this snippet, it will log the DPR:

console.log("devicePixelRatio:", window.devicePixelRatio);

Does devicePixelRatio change when the browser window is dragged between monitors?

Yes the devicePixelRatio changes, and you can detect it with matchMedia.

I think that you should have a look at this topic that give a more detailled answer for detect the change:

https://stackoverflow.com/a/29653772/3914736

---

Related Topics