如何将窗口ppi与屏幕ppi匹配？

Question

我正在开发我的HTML5游戏来匹配设备的屏幕，就像一个原生移动应用程序一样，我有一个viewport meta，它声明了宽度到设备宽度，并防止缩放，如下所示：

<meta name = 'viewport' content = 'width = device-width, user-scalable = 0'/>

和一个调整画布大小以匹配窗口的脚本：

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

我遇到的问题是，当我在我的1080p智能手机上测试游戏时，图形明显模糊；事实证明，我的画布大小(纵向模式)是424×829。然后我去掉了设备宽度，我的网页在纵向上渲染了980×1915，有点偏离了，然后在横向上渲染了980×371，这只比设备宽度稍好一点。我如何让它与屏幕的像素密度匹配？谢谢。更新:说清楚，让画布适应窗口并没有问题，我让窗口与屏幕的分辨率匹配(例如，在1080像素宽的屏幕上是1080像素宽，而不是980或424像素)。

Answer 1

我认为你的问题的答案是:只需将画布宽度设置为100vw，高度设置为100vh。