(Just to clarify, I'm seeking advice on how to make my app responsive, not asking how to create it)
I've been developing a web application that utilizes Three.js to display a scene across the entire window. My goal is to incorporate a configuration overlay that will show up and vanish when users click on a settings button. The concept is for this overlay to contain some text and HTML form elements.
I know how to implement the overlay, but my challenge lies in ensuring it displays correctly on mobile devices. Typically, when optimizing a website for mobile responsiveness, the common approach is to reduce the viewport size for mobile screens using something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
From what I understand, this setting simulates the page as if it was only 320 pixels wide, even if the actual device has a screen width of around 900 pixels.
The issue with this solution is that when rendering my fullscreen Three.js scene, it adheres to the 320 pixels width, resulting in a blurry image.
I am looking for a way to adjust the viewport for my overlay/config form to be smaller on mobile screens, without compromising the high-definition quality of my Three.js rendering.