Add matchMedia listener to detect changes to devicePixelRatio

[jimbojw]

The window scope property devicePixelRatio reports the density of device pixels to logical pixels in the browser. Different monitors have different devicePixelRatio values.

When a browser window is dragged from one device to another, such as to an external monitor, the devicePixelRatio can change. This change can be detected by adding a listener to the result of a matchMedia() query like so:

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

Credit: https://stackoverflow.com/a/29653772

The Scene should use this technique to detect changes to the devicePixelRatio and make changes as necessary, such as adjusting the canvas's width and height, and queuing a draw.