Make HTML5 Games Responsive to Browser Window + Maintain Aspect Ratio (Easy)

I recently wrote a javascript to make HTML5 exported games responsive to the browser window. This means that it will adjust to fit onto the screen for Mobile and Desktop, whatever the screen dimensions, so you can avoid clipping on lower resolution devices, for instance. To use it:

• Just download the attached file, called responsive.js
• Build your game for HTML5, then extract the contents of the generated zip file
• Copy and paste responsive.js into the parent directory, beside index.html
• Open index.html, and find the closing body tag, it looks like this:

  </body>

  . Then, insert this line just before it, so it looks like this:
  

  <script type="text/javascript" src="responsive.js"></script>
  </body>
• Save your changes, and open the index file in your browser (may have to use localhost, opening in Firefox directly seems to work fine though). Try resizing the browser window to see the effect, you should see the game canvas (window) scaling up and down, while maintaining the original aspect ratio, so that it is never being clipped horizontally or vertically. 

Enjoy!

This is really useful. Thanks a lot for sharing it.

You're welcome!

Thank you Richard. That's what I need.
I'll test asap

Wow, really useful!

Maybe this interenting feature could be implemented in Stencyl as an option in Game Settings > Web
I have made this suggestion in the Issue Tracker: http://community.stencyl.com/index.php?issue=630.0

Does this do the same as this or is it different?

Add this to the openfl settings (settings > advanced > openfl settings)

<window resizable="true" if="html5" />

@letmethink yes, it seems to work the same way. Thank you so much.

Does this do the same as this or is it different?

The difference is that only resize the game if the screen is smaller, but does not expand if there is more space available.

It can be useful for those seeking responsive with a maximum game screen size.

@letmethink, do you know what code we should add to get the game canvas to be scaled (instead of being cropped) to fit a specific pixels width and height?

For example, for HTML5 games, if we want the game canvas to be scaled (not cropped) to fit 720x480 pixels, what code should we add to "settings > advanced > openfl settings"?

The difference is that only resize the game if the screen is smaller, but does not expand if there is more space available.

It can be useful for those seeking responsive with a maximum game screen size.

Correct