（要明确我的问题是如何让我的应用响应，而不是问如何制作它）
因此，我一直致力于使用Three.js使用完整窗口渲染场景的Web应用程序。我想制作一个配置叠加层，当您单击设置按钮时，该叠加层会出现并消失。我们的想法是，这个叠加层中会包含一些文本和一些html表单元素。
我知道如何制作叠加层，但我的奋斗是如何让它在移动设备上正确显示。一般来说，当一个网站在移动设备上负责任地表现时，似乎通常的方法是通过在移动设备上将视口设置得更小，通过以下方式：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我的理解是，这会使页面呈现为只有320像素宽的页面，即使实际上移动设备有900像素宽的屏幕。
使用此解决方案的问题是当我渲染全屏Three.js场景时，它使用320像素宽，我最终得到了模糊图像。
我希望能够以某种方式将我的overlay / config表单的视口设置为在移动设备上更小，同时仍然保持我的Three.js场景渲染的完整定义质量。 / p>
答案 0 :(得分：0)
根据评论，您的问题似乎是高dpi屏幕上的像素比率 使用类似的东西：
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);