如何扩展固定大小的HTML5 webapp游戏？

Question

我正在开发一个基于HTML5固定大小的游戏。它自然地获得了动画和图形。固定为1000px x 620px，但我不能让游戏按比例缩小，以适应不同尺寸的设备。我非常适合iPad，但我只在iPhone上看到游戏的一部分。

我认为将整个事情缩小（包括图形）很容易，但我找不到解决方案。

我有什么选择，现在我想到3个完全不同的CSS，媒体查询一个用于iPad，iPad mini和iPhone。但它似乎需要做很多额外的工作。

感谢您的帮助！

Answer 1

您可以尝试使用iframing您的页面并使用标准变换将其缩放到您需要的大小。最好让你的游戏不依赖高度/宽度，但这可能会很快解决问题：

iframe {
    -ms-zoom: 0.25;
    -transform: scale(0.25);
    -moz-transform: scale(0.25);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.25);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.25);
    -webkit-transform-origin: 0 0;
}