This is the usual approach here as far as I know. Usually, you’ll set a max pixel ratio of 2 or 3 and clamp to that.
I’ve never come across any problems here, why do you think this would be an issue?
My experience is that there’s unfortunately not really a magic max pixel ratio that can be used to guarantee good performance. My laptop has a 1.25 or so pixel ratio but sometimes just bumping it down to 1 improves performance dramatically. It really just depends on the hardware. It would be nice if there were a simple way to get the physical size of a pixel so at least you can try to target a consistent physical resolution but even then I don’t think that would suffice in a lot of cases.
@titansoftime
4 is the biggest pixel ratio I’ve heard of! What kind of phone do you have? My solution to the scalable performance problem has been to track the webpages framerate and modify the scene or renderer to improve performance or quality until the target framerate is hit. So you could decrease the pixel ratio until you hit 55 fps, for example.
As a bit of a self plug (but hopefully a helpful one) I’ve put together a utility called framerate-optimizer, which helps with this type of tweaking in javascript. There’s a demo that shows it in action on a basic three.js scene, too. It’s inspired by Babylon’s SceneOptimizer but is a bit more flexible. It’s not a perfect solution but has worked pretty well for my use cases.