Question

使用GameMaker Studio制作了HTML5游戏。当我在手机（iOS和Android）上打开它时，它使用了错误的分辨率。

一个例子。游戏使用960 * 640：

但是在电话里我看到了：

此外，您还可以看到引擎返回的浏览器分辨率。如您所见，它比实际分辨率（640 * 360而不是1920 * 1080）低x3倍。当然我的第一个想法是它是引擎的错误。但我使用HTML / JS检查它，并且有相同的值。 StackOverflow上的一个人提到了viewport meta，看起来它可能有所帮助。

我查看了GMS生成的index.html，并且有一行

<meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

我没有HTML /等经验，所以我只尝试了一些值：

<meta name ="viewport" content="width=device-width" />
<meta name ="viewport" content="width=device-width, height=device-height" />
<meta name ="viewport" content="width=960, height=640" />
<meta name ="viewport" content="width=640, height=960" />

和其他一些。

但它没有解决问题。虽然有时结果更好。

是否有任何魔法让游戏也能发挥作用？

P.S。如果它会有所帮助：

您可以看到index.html there

已编译的项目there（据我所知，它无法在本地磁盘上运行）

P.P.S。我在Android上使用Chrome和Samsung Internet，在iOS上使用Safari + Chrome。

P.P.P.S。我知道window.devicePixelRatio，但我不知道如何在那里使用它。

upd：即使只有content="width=device-width"，它也会显示整个图片，但图片的垂直分辨率较低。例如，横向模式下的960 * 420（1920 * 1080显示）。当然那场比赛看起来很糟糕。如果我将设备翻转为纵向，则浏览器返回960 * 1494。图像看起来很完美，但它太小（仅占显示屏的1/3）。所以我需要浏览器的垂直分辨率比游戏画布的高度更大（或相等）。

upd2：找到解决方案

<script type="text/javascript">
    var canvas = document.getElementById("canvas");

    function canvas_resize(){
        canvas.width = 960 * window.devicePixelRatio;
        canvas.height = 640 * window.devicePixelRatio;
    }

    window.addEventListener("orientationchange", canvas_resize);

    document.addEventListener("DOMContentLoaded", function () {
        canvas_resize();
    })
</script>

但有两个问题：

适用于Android，但它不适用于iOS（iOS显示分辨率非常低的图像）。什么解决方案适用于iOS？
浏览器应该请求站点的桌面版本（“请求桌面站点”选项）。当浏览器请求移动版本的网站时，它也总是使用低分辨率。有没有办法避免它？

手机上HTML5的错误解决方案

0 个答案: