search

juggle / resize-observer

Polyfills the ResizeObserver API.
https://juggle.studio/resize-observer
Apache License 2.0
964 stars 46 forks source link

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

Open TremayneChrist opened 4 years ago

TremayneChrist commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

pixels (1px = 1/96th of 1in) _Source: w3schools_

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

TremayneChrist commented 4 years ago

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

mdingena commented 4 years ago

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?