Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics

Automatically scaling window for html5 games

A topic by Tsun created May 12, 2017 Views: 429 Replies: 4
Viewing posts 1 to 4
(1 edit)

I just tried out uploading some of my projects, and I noticed there's no way to make the window scale automatically to fit the browser window. The best option is the full-screen button, but that's not very ideal IMO.

It would be cool if it was possible to either select an option where the game iframe scales with the browser window size, or add some kind of an "enlarge" button that does it instead of the "full-screen" button.

Add this style in your browser dev tools to see what I mean:

.view_game_page.view_html_game_page.ready .game_frame{
    height: calc(100vh - 150px)!important;
    width: calc(100vw - 100px)!important;

There's a problem with that: if the game opens in full screen, where do you put a description, downloads, comments, buttons to link and rate the game...?

It's not full screen, it's the same as if the game size matched your browser window by accident. If you leave a little bit of padding as in my example CSS, the top menu bar and a part of the description are still visible so the visitor can realize that they can scroll down.

Here's a video of it in action (flashing epilepsy warning):

(2 edits)


Did you seriously change the CSS just so my example CSS in the OP wouldn't work? Fixed.

Here's a new video showing what this looks like, since my previous link seems broken: