Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am trying to make html5 games to be played on the browser(not offline apps), and I am trying to support the maximum number of platforms, hence I need to know what dimension should I use for the game canvas so that it works in the most number of places.

Also is there anyway to "scale" a large game to fit in the tiny size of iphone(around 320x356px I think). By "scale" I don't mean to actually resize just the canvas, as because that can mess up the coordinate based calculations, and for a large number of objects, re-positioning based on canvas size can be a real hassle.

share|improve this question
Just FYI: First iPhones are 480x320, since iPhone 4 (Retina-display) it's 960x640 – bummzack Apr 1 '12 at 6:38
Oh, I didn't know that, thanks! – aoi Apr 1 '12 at 6:46

Google collects data on the average size of the browser window people use when visiting their website:

As you can see 98% of the people browsing have a window size of at least 800x400 so I suppose that is a good start. Of course if you think your game will be played mostly on phones the statistics may be slightly different since these statistics are desktop+mobile.

share|improve this answer
Please, this is kinda important to me, @Roy, but does Google include mobile devices in their statistics? I plan for my game to be playable only from PCs, so I'd like to have accurate dimensions only for them, not mobile phones. – jcora Apr 6 '12 at 21:44
I'm not sure, it doesn't say but I think they also include mobile devices. You can also look at the steam hardware survey here: it's PC only and gamer only so that might be more like your target demographic. In that case 1366 x 768 or 1280x720 seem like a very safe bet. – Roy T. Apr 7 '12 at 7:12

I think this question cannot be answered with a number for the and for the height. There are just too much different display formats. I think that the discussion of the games dimensions should be based on the game. What I mean is: Tetris in landscape format might not be that cool as in portrait. I prefer setting an fix aspect ratio, which always can be scaled safely into the available space.

share|improve this answer

iPhones (and most smartphones I believe) automatically scale web pages to fit the width of the device, thus you can actually make your game in a different scale and as long as the page isn't too tall relative to its width it will automatically fit on the screen.

As far as I have quickly read you can also use a viewport tag to get more precise control of this process. It's not something I have experience with, but it seems worth looking into.

share|improve this answer

check this awesome tutorial for scaling:

EDIT: an idea for object placement and scaling, not sure if its correct / practically doable. I am yet to try this:

  • have some base dimension like (960 x 640)
  • while writing game logic, handle positions / scale as if you are developing only for 960x640.
  • at the time of rendering, multiply the position and scales with these factors screenWidth / 960 for x-axis and screenHeight / 640 for y-axis, where screenWidth and screenHeight are actual screen dimenstions.
share|improve this answer
The actual scaling of the game is not the problem, but what happens with the coordinate system afterwards is. – jcora Apr 1 '12 at 19:19
That's why you shouldn't work in absolute coordinates for rendering, which that article mentions. – Roy T. Apr 1 '12 at 20:07
OK. Also, you might want to scale images and positions before, not to it on every rendering iteration. – jcora Apr 7 '12 at 12:30

i used ImpactJS, a game engine that automatically resizes a game to a required dimension, taking into account retina displays from the iPhone4. The coordinate systems are not screwed this way.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.