Hey everyone! I was searching for my question, but didn’t find anything that helps with this headache. The question is: how can I make my canvas/engine responsive to the device screen? If I do nothing (without any settings) and run my project on mobile, then on mobile I see a low poly scene, like so…

Maybe this can help: [image] Css scale and scene picking Questions https://www.babylonjs-playground.com/#GYSD2P#8 Re wrote the createPickingRay method, ClientRect should be used instead of renderWidth; See line 74

I don’t know anything of mobile dev, so hopefully someone who knows more will be able to help. Regarding the water, what is exactly the problem? Does it work when you remove <meta name="viewport" content="width=device-width, initial-scale=1" />? Does it work on a desktop computer?

Water works fine on desktop and looks strange(see, like parallelograms) on mobile, but normal only if I remove that meta tag.The whole 3D scene looks well on mobile without that tag, but the other – 2D content – doesn’t display normally.

Hey, just from the top of my head - do you have this line in your code? window.addEventListener("resize", () => { engine.resize(); }); Another thing is: [image] starkXV: I tried to remove <meta name="viewport" content="width=device-width, initial-scale=1" /> and in this case the scene on…

Hello @starkXV just checking in if you have any more questions?

Hi there! Sorry for that late response. Yea, I still have the same problem. I tried canvas.width = window.devicePixelRatio * window.innerWidth and the same for its height. After this I got a beautiful picture, but can’t interact with meshes any more in the right way. For instance, I click on an imag…

And yep - that helped me! Thank you, my French friend! Guess now I need to create another post here with a tutorial on how to get beautiful picture on mobile and who knows maybe someday it’ll be integrated into Babylon engine as well.

Hi there! I’m facing the same problem, that my game looks pixelated and blured on mobile. And it can be different in different browsers. So I found this topic, and probably have better solution. At least for me. Just set once: engine.setHardwareScalingLevel(1 / window.devicePixelRatio) And I go…

Desktop/mobile ratio and scale

Questions

Evgeni_Popov November 14, 2022, 9:31am 7

Maybe this can help:

Topic		Replies	Views
Game blurry on mobile Questions	1	561	January 12, 2023
Game becomes blurry and slow,when including viewport params in html file Questions	23	2621	October 12, 2022
Babylon GUI mobile is all blurry Questions	11	1301	February 29, 2024
Does BJS take into account window.devicePixelRatio? Questions	3	784	February 17, 2024
How to set "babylon scene" so the pixels don't break Questions	10	488	February 11, 2022

Desktop/mobile ratio and scale

Related topics