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

Question

我正在开发一个固定大小的基于 HTML5 DOM 的游戏。它自然地获得了动画和图形。它固定为 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;
}