How to handle different screen sizes. HTML5 Mobile Game Tutorial | Hacker News Reader

How to handle different screen sizes. HTML5 Mobile Game Tutorial

indiegamr.com

This is what I use:

    var ratio = Math.min(window.innerWidth/BASE_WIDTH,window.innerHeight/BASE_HEIGHT)

    document.body.style.zoom = ratio

    or

    document.body.style.WebkitTransform='scale('+ratio+')'

Resize the whole board instead of scaling every object.

* Half-baked example of what I do (Webkit only as usual)

http://georgenava.appspot.com/demo/poker/poker.html

that's true! and there are cases, where your way is applicable, however there are a couple issues with it when working with canvas apps(I'm not completely up to date with all the details about style.zoom, so correct me, if i'm wrong): - the css3 'zoom' is not very well implemented, for example in FF you would have to use: -moz-transform: scale(XX); (which is a hassle, but okay - it works) , but afaik in IE9 the whole method was marked deprecated - i don't know about IE10 - maybe we have some luck there, wouldn't rely on it though :-)

- when zooming via style.zoom, everything will be zoomed according to a base-width&height, so if the target-device has a different aspect ratio than your base-sizes, you will have to reposition certain objects by hand anyways, also you will have to set the width&height of the canvas manually - as there might be overlapping parts

- when it comes to targeting mobile devices with canvas, you quite often want to use tools like Ludei's cocoonJS or AppMobi's directCanvas, that render html-canvas as a native WebGL-stage on mobile, and css-values like zoom or any other markup will just be ignored on those platforms

- however when you are working with DOM-elements style.zoom can come pretty handy!

I really like your Poker-Demo btw.! Love how the animations are super-smooth! Keep it up! cheers

Not applicable to most games, but I did a puzzle game that uses HTML/CSS for layout, then enforced a fixed 2:3 ratio for the "content" area of the game, with each UI element using a percentage-based width/height. The great thing about this method is that the "graphics" are always crisp, regardless of screen resolution or pixel density.

Reply on news.ycombinator.com