适用于任何分辨率的HTML5 JS游戏

Question

We are going to create a bunch of educational contents like lesson, exercise and games for children to be used on OLPC xo. We are going to use HTML5 and JavaScript. Previously they had used Flash.

The xo has 900x1200 resolution. The content though created primarily for xo, will be used online also. The content created previously in Flash scales well in any resolution. What should I do to have the same behavior in HTML5+JS content. so far few of the sample content has used fixed resolution of 900x1200 resolution with absolute positioning. They look great on xo but doesn't look great on variety of resolution in desktop computers.

Any help/guidance will be much appreciated.

Answer 1

Instead of fixed resolution, dynamically calculate the size of the window and initialize other parameters. 'window.innerHeight' and 'window.innerWidth' will check the size available on the browsers' window. Or make use of 'screen.height' and 'screen.width' to calculate the screen's resolution dynamically. Let me know if you need clarifications.

Answer 2

You can scale web content easily using transform: scale(scaleRatio); CSS property. Though this is a part of CSS3 standard the most of the browsers now use specific prefixes for this property like: -moz, -webkit, -ms, -o.

You can read more about transform on MDN .

Answer 3

Tom here from Scirra, we're a 2 man team who are making an HTML5 game engine called Construct 2 you might want to look at as it sounds like it might be right up your street.

Construct 2 can handle multiple screen sizes, it's crucial for deployment of HTML5 games and apps to mobile devices that sport many resolutions. Check out our tutorial on how to manage this in Construct 2:

http://www.scirra.com/tutorials/73/supporting-multiple-screen-sizes