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

Question

我正在开发我的 HTML5 游戏以匹配设备的屏幕，就像原生移动应用程序一样，我有一个视口元数据，将宽度声明为设备宽度并防止缩放，如下所示：

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

以及调整画布大小以匹配窗口的脚本：

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

我遇到的问题是在我的 1080p 智能手机上测试游戏时画面明显模糊；结果我的画布尺寸（纵向模式）是424×829。然后我删除了 device-width，我的网页在纵向上呈现 980×1915，这有点偏离，然后在横向上呈现 980×371，这仅比 device-width 好一点点。如何让它与屏幕的像素密度相匹配？谢谢你。 更新：需要明确的是，我在将画布放入窗口时没有问题，我无法让窗口与屏幕的分辨率匹配（例如，在 1080 像素宽的屏幕上为 1080 像素宽，而不是 980 或 424） .

Answer 1

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