screen size for HTML5 game? (to be played on mobile browser on phones/tablets)

Hi,

I'm making a HTML5 game that I'd like to be played on  a phone  or tablet (using a mobile browser such as Safari). At this time I am NOT publishing the game to iOS or Android.

Any recommendation on what screen size it should be set at? I understand that  mobile games should be designed at 1x resolution and that it will scale accordingly based on what device is playing the game (http://www.stencyl.com/help/viewArticle/186) . However, I am not publishing the game natively to iOS or Android, so I don't know if the game will scale properly if designed at 1x. (I was thinking maybe 640x480 would be a good resolution to design at?)

I also need some advice on how to embed the game properly so that the game can be viewed and scaled properly on a mobile browser screen (and not be cut off on a side or at the bottom, etc).

As a quick test, I made a simple game (480x320, game settings -> web -> scale = 1x, scale mode = scale to fit (full screen), scales: all checked, start in full screen = no), which I then uploaded to itch.io (https://kerjen.itch.io/test).

On my iphone (Safari) the screen appears to be cut off on the right in portrait mode... Also, in landscape mode, the full screen option doesn't seem to work...?

Any help and suggestions are greatly appreciated!

Thanks!

Hmm, I don't know what size you could try.
But it seems for html5 , scaling works a bit differently

 try to put in the advanced OpenFL settings

Code: [Select]

<window resizable="true" if="html5" />
and it should adapt to page automatically.

Hi Yoplalala,

Yes, this works! Thanks so much for your help!! This tip should be included in the Stencylpedia article about "App Scaling" (http://www.stencyl.com/help/viewArticle/186), I'm sure this would save time & frustration for so many people like me!

Just to help future search results, I did as you suggested and this is what I changed/added:

Stencyl -> open game project -> settings -> advanced tab -> OpenFL Settings, I added the following code:

Code: [Select]

<window resizable="true" if="html5" />
THANKS AGAIN!