zakarya/puzzles
1
0
Fork 0
mirror of git://git.tartarus.org/simon/puzzles.git synced 2025-04-20 23:51:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

js: Pay attention to the device pixel ratio

Browse Source 
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.
This commit is contained in:
Ben Harris
2022-10-22 13:34:36 +01:00
parent 9be9a12476
commit 24ce6260d5
2 changed files with 2 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
emcclib.js
View File

@ -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;

1
html/jspage.pl
View File

@ -257,6 +257,7 @@ EOF
#puzzlecanvas {
display: block;
width: 100%;
}
#statusbarholder {