javascript - 如何关闭 JavaScript 中的 CSS 像素比，以便我可以在手机上创建高清游戏？

Question

我一直在用纯 JavaScript/CSS/HTML 开发游戏，我遇到了一个问题，我的 1920x1080 手机将我的游戏显示为 586x330，像素显示比例为 3。我想知道的是如何让我的游戏在高清屏幕上运行，因为我不想玩低分辨率的游戏，因为它可以是高分辨率的。

当我在网络浏览器(台式机或移动设备)上运行游戏时，像素密度为 1，所以一切正常，当我使用 PhoneGap 作为 Android 应用程序运行它时出现问题。

任何帮助将不胜感激，我很困在这里。

谢谢，

Answer 1

我假设您使用的是 <canvas>元素，因为它是大多数游戏的图形基础。

如果是这种情况，您需要确保只使用其内联 width 来调整它的大小和 height属性。通过内联，我的意思是这些字面意思是嵌入在 html 中:

<canvas width="--your width--" height="--your height--">
</canvas>

您要确保没有其他尺寸被应用于您的 Canvas 。

这些都不是:

/* style.css */
canvas {
    transform: scale(1.5, 1.5);
}

甚至都不是:

/* style.css */
canvas {
    width: 100%;
    height: 100%;
}

问题是 Canvas 必须使用的分辨率像素数仅由其内联定义width和 height属性。如果你想让你的 Canvas 与你的手机屏幕有相同的分辨率，你需要使用javascript来修改它的width。和 height每当屏幕尺寸改变时:

/* thing.js */
var resizeCanvas = function() {
    var canvasElem = getYourCanvasElement();

    canvasElem.width = getWidthOfScreen();
    canvasElem.height = getHeightOfScreen();
}

// Make sure canvas fits initially...
whenPageLoads(resizeCanvas);

// And then resize it whenever needed
whenScreenSizeChanges(resizeCanvas);

当然我不知道你使用的是什么框架，所以代码只是一个模板。您需要决定如何实现 getYourCanvasElement , getWidthOfScreen , getHeightOfScreen , whenPageLoads , 和 whenScreenSizeChanges .

编辑:可能影响 Canvas 大小的另一件事是浏览器视口(viewport)缩放。对此有很好的洞察力here .