From 24ce6260d55b53c27bd92a92116816b437e83e0c Mon Sep 17 00:00:00 2001 From: Ben Harris Date: Sat, 22 Oct 2022 13:34:36 +0100 Subject: [PATCH] js: Pay attention to the device pixel ratio The CSS "px" unit isn't always a device pixel. On devices with high-DPI displays, there can often be multiple device pixels to a CSS px, while in particularly low-resolution displays (like feature phones), the user might zoom out to get several CSS px to a device pixel. And even on desktop browsers, text zooming controls can change the ratio. To make Puzzles' rendering look good on an arbitrary device pixel ratio, we really want the pixels of the canvas to be device pixels, not CSS px, so that the canvas doesn't have to be scaled by the browser for display. To correct this, we now control the CSS size of the puzzle canvas, via its containing
, to be the canvas size divided by the device pixel ratio. There is a significant gap, which is that this doesn't yet track changes to the device pixel ratio. This is slightly complicated, so I'll put it off to the next commit. --- emcclib.js | 2 +- html/jspage.pl | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/emcclib.js b/emcclib.js index c145426..3d9db2f 100644 --- a/emcclib.js +++ b/emcclib.js @@ -546,7 +546,7 @@ mergeInto(LibraryManager.library, { js_canvas_set_size: function(w, h) { onscreen_canvas.width = w; offscreen_canvas.width = w; - resizable_div.style.width = w + "px"; + resizable_div.style.width = w / (window.devicePixelRatio || 1) + "px"; onscreen_canvas.height = h; offscreen_canvas.height = h; diff --git a/html/jspage.pl b/html/jspage.pl index e19c89a..b9e4249 100755 --- a/html/jspage.pl +++ b/html/jspage.pl @@ -257,6 +257,7 @@ EOF #puzzlecanvas { display: block; + width: 100%; } #statusbarholder {