ref: 24ce6260d55b53c27bd92a92116816b437e83e0c
parent: 9be9a12476b3958f12caad1d43b39243e7758e73
author: Ben Harris <bjh21@bjh21.me.uk>
date: Sat Oct 22 09:34:36 EDT 2022
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 <div>, 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.
--- a/emcclib.js
+++ b/emcclib.js
@@ -546,7 +546,7 @@
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;
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -257,6 +257,7 @@
#puzzlecanvas {display: block;
+ width: 100%;
}
#statusbarholder {