0

I'm working on a website that needs to change settings when a user's device changes from retina to non-retina or vice-versa. Is there a JavaScript event that fires when users plug into or unplug from external devices?

I could imagine polling window.devicePixelRatio and listening for changes but I'd prefer something that's "lazier" and only triggers when the device pixel ratio changes. Any suggestions others have on how best to achieve this would be welcome!

duhaime
  • 25,611
  • 17
  • 169
  • 224
  • Not exactly a duplicate, but if the changes are "cosmetic" [this answer about CSS media queries](https://stackoverflow.com/a/8212989/133203) may help. – Federico klez Culloca Jan 10 '20 at 15:46
  • Might also help: https://stackoverflow.com/questions/19689715/what-is-the-best-way-to-detect-retina-support-on-a-device-using-javascript – Pete Jan 10 '20 at 15:49
  • MDN has [an example of using `matchMedia` and the `change` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Example_2_Monitoring_screen_resolution_or_zoom_level_changes) to do exactly that. – Heretic Monkey Jan 10 '20 at 15:49
  • Thanks for your messages! I need to trigger a JS event, and I know I can query for the resolution but I'm wondering if there's a supported event that's triggered when the `devicePixelRatio` changes (rather than having to query ad infinitum) – duhaime Jan 11 '20 at 16:08

0 Answers0