resize-observer
resize-observer copied to clipboard
Improve device-pixel-content-box notifications when switching resolutions
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);
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.
pixels (1px = 1/96th of 1in) Source: w3schools
Therefore everything is based of off 96dpi and can use the above solution.
matchMedia
is only available in IE10 and above, however, we can probably assume that anyone running IE9 is also using an older monitor.
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?