I would like to know if there is any "ideal" width to height ratio when creating games for the web.

My canvas is fluid, and resizes according to the browser width and height. But with all the devices out there it's difficult to know what ratio to choose.

Right now i have 4:3 (Width:Height), but is there any ratio that would fit well in most devices?

Thank you.

  • \$\begingroup\$ Not an answer, but with my game I went with a 16:9 ratio. It's the most common, more than 40% of users, on Steam according to their surveys/data. This is only data from desktop computers though. \$\endgroup\$
    – William
    Jun 28, 2012 at 3:50
  • \$\begingroup\$ Allright, might go with that, looks good in my browser but if someone has some mobile device statistics would be awesome. \$\endgroup\$ Jun 28, 2012 at 4:07
  • 1
    \$\begingroup\$ There is a Golden Ratio \$\endgroup\$ Jun 28, 2012 at 4:40
  • \$\begingroup\$ Might share how you resize your assets, @hustlerinc? \$\endgroup\$
    – jcora
    Jun 28, 2012 at 11:52
  • \$\begingroup\$ @Bane, I haven't got that far yet, right now I have placeholder pixel-art that don't resize too well, but because of the low quality actually don't look too bad either. I'm considering vector graphics for later though. But when drawn in a canvas set to 100% width, images resize themself to fit the ratio (with no additional code from my end). You can try it out by putting drawImage to a <canvas width="100" height="100"> then with css make it stretch, and the image drawn will keep the ratio. But I'll find a more fitting solution later. \$\endgroup\$ Jun 28, 2012 at 22:24

2 Answers 2


There is no standard size for screens and it is big problem. Andriod uses some standard screen sizes then stretches one of them for any other size of screen

  • res-long-land-hdpi 800x480
  • res-long-land-ldpi 400x240
  • res-long-port-hdpi 480x800
  • res-long-port-ldpi 240x400
  • res-notlong-land-hdpi 800x480
  • res-notlong-land-ldpi 320x240
  • res-notlong-land-mdpi 480x320
  • res-notlong-port-hdpi 480x800
  • res-notlong-port-ldpi 240x320
  • res-notlong-port-mdpi 320x480

You might like to design your game screen in a way that your GUI scale with any size of screen. for example have your toolbar attach to top of screen and your action buttons stick to bottom of screen, as for background you can scale width or height to fit the smallest screen dimension and the biggest will hide some part of background.

  • \$\begingroup\$ The problem is that it's a multiplayer game, so hiding part of screen where it doesn't fit gives an advantage to the users that have big screens. Since they can just stand out of sight of the other players. My current approach calculates if it should fill on Width or Height, and then stretches as big as it can until it reaches the end of either while keeping ratio. \$\endgroup\$ Jun 28, 2012 at 8:18
  • \$\begingroup\$ you are totally right, but even in games like World of Warcraft this happens. In my 16:9 monitor I can't see name tags of mobs (height) and in 4:3 my view angle is smaller and I have to rotate my view to see around. \$\endgroup\$
    – AaA
    Jun 28, 2012 at 8:35
  • \$\begingroup\$ I'll try to get some good number depending on the resolutions you posted. I guess it's the best I can do, thanks. \$\endgroup\$ Jun 28, 2012 at 22:15

Is not a Standard, but I like the Golden Ratio

With b + a = 480 a = 300.

Its your canvas, you choose the size. You must calculate a according with user's resolution


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .