js: Make update_pixel_ratio more backward-compatible

Despite my stylistic downgrades, it still used two features not present
in Firefox 48, and hence KaiOS 2.5: passing options to addEventListener,
and calling addEventListener on a MediaQueryList at all.  Now it uses
the older addListener method and explicitly removes each listener as
soon as it's called.

1 files changed, 6 insertions, 3 deletions

diff --git a/emccpre.js b/emccpre.js
index 37e5829..1debd92 100644
--- a/emccpre.js
+++ b/emccpre.js
@@ -527,13 +527,16 @@ function initPuzzle() {
     /*
      * Arrange to detect changes of device pixel ratio.  Adapted from
      * <https://developer.mozilla.org/en-US/docs/Web/API/Window/
-     * devicePixelRatio> (CC0).
+     * devicePixelRatio> (CC0) to work on older browsers.
      */
+    var mql = null;
     var update_pixel_ratio = function() {
         var dpr = window.devicePixelRatio;
+        if (mql !== null)
+            mql.removeListener(update_pixel_ratio);
         resizable_div.style.width = onscreen_canvas.width / dpr + "px";
-        matchMedia(`(resolution: ${dpr}dppx)`)
-            .addEventListener("change", update_pixel_ratio, { once: true })
+        mql = window.matchMedia(`(resolution: ${dpr}dppx)`);
+        mql.addListener(update_pixel_ratio);
     }
     update_pixel_ratio();