Blurry textures when Browser Zoom is increased

Questions
1

I’m using Three.js to render a web browser based 2D card game and I’ve managed to get the textures nice and sharp by making sure they’re positioned at integer pixel positions rather than sub-pixels but if I change the “Zoom” in the Chrome browser settings from 100% to anything higher then the textures become blurry. My web site isn’t live yet but you can see the same effect in this Three.js example:

https://threejs.org/examples/#webgl_geometry_cube

If you view this in the Chrome web browser and click on the three vertical dots in the top right to pull up the Settings menu and change Zoom from 100% to 200% you’ll notice the wood texture becomes blurry while the geometry remains the same. This is because window.innerWidth and window.innerHeight are getting smaller and smaller and then the browser is scaling everything up by 200% to maintain the same screen size. This isn’t that noticeable at 125% with a 3D scene but with 2D playing cards, even 125% makes the 2D images change from very sharp to slightly blurry. Some players might have their browsers or Windows system font (which has the same effect) set to something higher than 100% and my game is then blurry. Is there any way to prevent browsers from zooming the Three.js canvas, maybe with some HTML in the page ?

2

" The HTML meta tag attribute “user-scalable=no” can restrict users from zooming, which may be defensible in certain situations. For example, if you’re building a web game or desktop-like application, zooming might detract from the user experience. In this example, “maximum-scale=1" is also intended to disable scaling."

3

This only seems to work on mobile devices not desktop:

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

However, after some web searching, I’ve discovered that if I add the following to my javascript startup code then it fixes the problem:

renderer.setPixelRatio(window.devicePixelRatio)