HTML: How to downscale a game on small screen

Question

I made my game work well in the HTML export on a PC. However, on a mobile phone, i see only the upper left part of the game. Same problem if i load the game in a small browser window.

I have configured stretch mode "2d" and the aspect to "keep". When inspecting the HTML, i found that the #canvas element is always set to the window size i configured in the project settings. How can i scale down to show the whole game on a smaller screen? OS.get_window_size() returns the canvas size, not the actual browser window size, otherwise i could scale the viewport to fit into the actual browser window size.

What is the proper way to make the game scale down to fit into a small browser window?

Comments

Is Resizable enabled in the Project Settings?

---

it is enabled, yes. and it works fine when building the native linux app, i can resize the window and the game scales as expected.

in the web browser, the canvas is fixed size and seems to not adjust to the browser window size.

i will check if the problem is still present with godot 3.4.0, the changelog indicates that quite some improvements have been done.

---

Try enabling Fullscreen in the project settings and export the project again.

Answer 1

Ok, i found the answer that makes it work perfectly fine and just as i would have expected. I was looking in the wrong place. This is not controlled in "Project Settings..." but in the dialog while exporting for HTML5. I need to set the option "Canvas Resize Policy" from "Project" to "Adaptive".

And now that I found it, it makes perfectly sense that this is in the export options and not the application options. It is a HTML export specific problem.