如何缩放固定大小的 HTML5 webapp 游戏？

Question

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

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

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

感谢您的帮助！

Answer 1

您可以尝试对页面进行 iframe 并使用标准转换将其缩放到您需要的大小。让您的游戏不依赖于高度/宽度可能会更好，但这可能有助于快速解决问题：

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;
}