All geek questions in one place

Window.devicePixelRatio change listener

window.devicePixelRatio will return 1 or 2 depending on whether I use a monitor or a standard retina. If I drag a window between two monitors, this property will change. Is there a way that I can have a listener fire when a change occurs?

+6
source share
1 answer

You can listen to the media query with matchMedia , which will tell you when devicePixelRatio will pass a certain barrier (unfortunately, not for arbitrary scale changes).

eg:

 window.matchMedia('screen and (min-resolution: 2dppx)'). addListener(function(e) { if (e.matches) { /* devicePixelRatio >= 2 */ } else { /* devicePixelRatio < 2 */ } });

The listener will be called when you drag the window between monitors, as well as when connecting or disconnecting an external monitor without a retina (if it forces the window to move from the retina to the screen without the retina or vice versa).

window.matchMedia supported in IE10 + and all other modern browsers .

Links: https://code.google.com/p/chromium/issues/detail?id=123694 , MDN at min-resolution

+9
source

Source: https://habr.com/ru/post/983440/

More articles:


All Articles