javascript - 如何将窗口 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。然后我删除了设备宽度，我的网页在纵向上呈现 980×1915，这有点偏离，然后在横向上呈现 980×371，这仅比设备宽度好一点。如何让它与屏幕的像素密度相匹配？谢谢你。更新：需要明确的是，我在将画布放入窗口时没有问题，我无法让窗口与屏幕的分辨率匹配（例如，在 1080 像素宽的屏幕上为 1080 像素宽，而不是 980 或 424） .

标签： javascripthtml

Answer 1

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