

How to handle different screen sizes. HTML5 Mobile Game Tutorial - muellerwolfram
http://indiegamr.com/retro-style-platform-runner-game-for-mobile-with-easeljs-part-4-adjusting-to-mobile-displays/

======
Kilimanjaro
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>

~~~
olsn
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

------
endemic
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.

