resize-observer icon indicating copy to clipboard operation
resize-observer copied to clipboard

Improve device-pixel-content-box notifications when switching resolutions

Open TremayneChrist opened this issue 5 years ago • 4 comments

When a window is dragged across screens with different resolutions, no notification is fired when observing device-pixel-content-box. To improve this, use matchMedia API to watch for resolution changes.

matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
.addEventListener('change', schedule);

TremayneChrist avatar Jan 02 '20 13:01 TremayneChrist

IE only supports dpi values, so will have to add in some extra fluff for this.

matchMedia(`(resolution: ${window.devicePixelRatio * 96}dpi)`)

Something like this could work, although I'm unsure if screen densities are always based off of 96dpi in browserland.

TremayneChrist avatar Jan 02 '20 16:01 TremayneChrist

pixels (1px = 1/96th of 1in) Source: w3schools

Therefore everything is based of off 96dpi and can use the above solution.

TremayneChrist avatar Jan 30 '20 07:01 TremayneChrist

matchMedia is only available in IE10 and above, however, we can probably assume that anyone running IE9 is also using an older monitor.

TremayneChrist avatar Oct 05 '20 18:10 TremayneChrist

I wouldn't assume that necessarily, but I'd say that perhaps polyfilling dppx isn't strictly a concern for this library. In #64 you're already recommending users of older browser versions to combine other polyfills with yours. Perhaps this is another such case?

mdingena avatar Oct 06 '20 00:10 mdingena