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

[TremayneChrist]

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]

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]

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

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

[TremayneChrist]

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

[mdingena]

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?