适用于任何分辨率的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属性轻松扩展网页内容。虽然这是CSS3标准的一部分，但现在大多数浏览器都使用此属性的特定前缀，如：-moz，-webkit，-ms，-o。

您可以在MDN上详细了解transform。

Answer 3

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

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

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