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

Question

我们将为孩子们创建一系列的教育内容，如课程、练习和游戏，用于OLPC xo。我们将使用HTML5和JavaScript。之前他们使用的是Flash。

xo有900x1200的分辨率。虽然内容主要是为xo创建的，但也将在网上使用。以前在Flash中创建的内容在任何分辨率下都可以很好地缩放。我应该怎么做才能在HTML5+JS内容中拥有相同的行为。到目前为止，很少有样本内容使用900x1200分辨率的固定分辨率和绝对定位。它们在xo上看起来很棒，但在台式机的各种分辨率下看起来就不太好了。

任何帮助/指导都将不胜感激。

Answer 1

动态计算窗口大小并初始化其他参数，而不是固定分辨率。'window.innerHeight‘和'window.innerWidth’将检查浏览器窗口中可用的大小。或者使用'screen.height‘和'screen.width’动态计算屏幕的分辨率。如果你需要澄清，请告诉我。

Answer 2

您可以使用transform: scale(scaleRatio); CSS属性轻松缩放web内容。虽然这是CSS3标准的一部分，但现在大多数浏览器都为该属性使用特定的前缀，如：-moz、-webkit、-ms、-o。

您可以在MDN上阅读有关transform的更多信息。

Answer 3

来自Scirra的汤姆，我们是一个2人团队，他们正在制作一个HTML5 game engine called Construct 2，你可能会想看看，因为它听起来可能就在你的街道上。

Construct 2可以处理多种屏幕尺寸，这对于将HTML5游戏和应用程序部署到具有多种分辨率的移动设备上至关重要。请查看我们的教程，了解如何在Construct 2中进行管理：

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