I have been trying to handle different mobile phones resolutions for my game. But the scene is not fitting accordingly in some screen its perfect but in some other screens it is shrinking. My question is how do I create a scene that will show consistent across all devices and all screen resolution. The gaming framework I am using is limejs and for building hybrid apps I have used Ionic 3. I have tried using window.devicePixelRatio and multiplying it with screen height and width but it did not work.
So after some months of trying, I came across this post-https://www.joshmorony.com/how-to-scale-a-game-for-all-device-sizes-in-phaser/ it discusses the concept of devicePixelRatio which when multiplied with window.screen.width and window.screen.height covers the entire mobile screen of all mobile devices.
the code which I used in terms of lime js when creating the director was:
game.director = new lime.Director(document.body, window.screen.width * window.devicePixelRatio, window.screen.height * window.devicePixelRatio)
(Note that my game runs in landscape mode)
For the phaser framework, it has different scale modes which we can use to cover the entire screen of mobile devices.