SOLVED scaling to device pixel ratio in mobile browser

[foreverisbetter]

Hey hi,
The question is pretty straightforward: How would you go about creating an HTML game for mobile browsers correctly scaled respecting physical resolution and not only the logical. Is there even a native way to do so in GML?
I'd be eternally grateful for an answer on how to do that. Thanks so much in advance!

 

[Nocturne]

https://www.yoyogames.com/blog/67/scaling-for-html5

Have you looked at that? It's for GMS1.4, but the ideas explained are exactly the same in GMS2 (just substitute the view stuff for cameras)

 

[foreverisbetter]

That tutorial simply explains how to scale the game canvas to the size of the browser and its fine for that but what I'm looking for has almost nothing to do with that. I'm looking for a way to get the device pixel density in html5 projects and how to implement it. Basically right now my HTML game runs in the correct size [filling the whole screen] but actually only at half the resolution the phone could display the game at if I had access to the device pixel density and a way to display the game canvas accordingly.

 

[foreverisbetter]

Hey hi,
for anyone who might stumble on this forum entry in the future with the same problem I finally found out how to do it:

<script type="text/javascript" src="scaleCanvas.js"></script>

I'm not entirely sure whether it even matters but I did put this line of code just above

<!-- Run the game code -->
        <script type="text/javascript" src="html5game/IllGetThis💩💩💩💩ingDone.js?HAFZB=475681614"></script>
        <script>window.onload = GameMaker_Init;</script>

in the index.html file that game maker creates when you press create application for HTML5. In this case 'IllGetThisingDone' was the name of the Game Maker project I was working on. scaleCanvas.js is an entirely new Javascript file that has to be put in the same folder as all the other files Game Maker created.

In scaleCanvas.js you put the following code:

  var canvas = document.getElementById('canvas');

  var pixelRatio = window.devicePixelRatio;   

  canvas.style.width = canvas.width * pixelRatio;
  canvas.style.height = canvas.height * pixelRatio;

Luckily Javascript looks a lot like GML. And that's it! If you know what needs to be done it's really easy - just like everything always is once you know how it's done. Hopefully this helps as I didn't find an concrete answer anywhere on the web before.