2

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

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

原来的

但是在电话里我看到了这个：

结果

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

我查看index.html了 GMS 生成的，有一条线

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

我没有使用 HTML/etc 的经验，所以我只是尝试了一些值：

<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" />

和其他一些。

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

有什么魔法可以让游戏也能正常运行吗？

PS如果有帮助：

你可以index.html 在那里看到

那里编译的项目（据我所知，它不能从本地磁盘工作）

PPS 我在 Android 上使用 Chrome 和 Samsung Internet，在 iOS 上使用 Safari + Chrome。

PPPS 我知道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>

但是有两个问题：

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

0 回答 0