Resizing game to fit mobile screens in HTML5

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By jebenipapa

I’ve tried following the Multiple Resolutions documentation but to sum it up “Just set the aspect ratio to X and try Y”. None of these things really worked for me, my current problem is the following:
I’ve made a browser game which works fine on desktops and somewhat androids as I’ve added a fullscreen option to help make the game look nicer that way. This solution does not work for every possible user as iOS does not allow for the browser to take control of the phone and make the game fullscreen. How can I resize my game to always fit the size no matter what it is? I.e. The example in the screen shot below is a IPhone X resolution how can I shirnk my entire game to fit that screen instead of it being big like it is right now which makes it so that the user needs to scroll in order to get a better angle of the game?

A thing that often ends up affecting the mobile displays is the window decor in browsers(like the area in which we put the URL etc.) and I don’t know how to set the game up in such a way that it is actually playable on phones.