如何消除JavaScript中的CSS像素比例，以便在手机上创建高清游戏？

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

当我在网络浏览器（台式机或手机）上运行游戏时，像素密度为1，因此一切正常。当我使用PhoneGap作为android应用程序运行游戏时，问题就出现了

任何帮助都将不胜感激，我被困在这里了

---

谢谢，

< p>我假设你使用了>/Case>元素，因为它是大多数游戏的图形基础。

如果是这种情况，您需要确保仅使用其内联

宽度
和
高度
属性调整其大小。通过内联，我的意思是，它们被嵌入到html中：

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

甚至这些都没有：

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

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

问题是画布必须使用的分辨率像素数仅由其内联
宽度
和
高度
属性定义。如果希望画布具有与手机屏幕相同的分辨率，则需要使用javascript在屏幕大小更改时修改其
宽度
和
高度
：

/* 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
，
GetWidthofsScreen
，
getHeightOfScreen
，
何时加载
，以及
何时筛选更改

编辑：另一个可能影响画布大小的因素是浏览器视口缩放。对此有很好的见解。
谢谢您的帮助！我正在使用元素。除了10px的边框和绝对定位，我没有任何css样式。我用来定义宽度和高度的是我在使用window.innerWidth和window.innerHeight，我不确定这是否是这个问题的根源，我见过其他人使用window.screen.height没有问题！您可能会遇到视口缩放问题。检查我在我的答案底部的编辑：）可能重复的不要忽略dPR，使用它：按dPR缩放画布大小，然后通过CSS缩小。您将获得画布的正确dPR。（不要忘记始终尊重CSS和属性大小之间的画布比例！）