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.enter image description here

  • 2
    \$\begingroup\$ What do you mean by "consistent"? If the device has a different aspect ratio, or a different pixel density, then something will need to change — whether it's scaling content differently, laying it out differently on screen, adding padding, etc. You will need to start by defining the main resolutions you want to support, and defining exactly how your game should look on each. Then we can get into how to achieve those specific outcomes you've chosen. \$\endgroup\$
    – DMGregory
    Commented Apr 25, 2019 at 22:55
  • \$\begingroup\$ By consistent I meant that room should look the same to all the players no matter on which device or platform they play like for example if on 1 device a button is at bottom left corner then it should be same across all devices. Right now what happening is when a device resolution increases then in that case the elements cannot scale properly and do not align. Currently I have used a condition that when window.screen.height > 500 I assigned different coordinate to elements and in else case I assign different coordinate but still its not working properly due to different screen width and heig \$\endgroup\$
    – Shiv
    Commented Apr 26, 2019 at 1:30
  • \$\begingroup\$ It sounds like you should show us what your screen looks like, and which controls you want to stick to which corners/edges as the screen changes in size and shape. \$\endgroup\$
    – DMGregory
    Commented Apr 26, 2019 at 1:52
  • \$\begingroup\$ As you will see above, in some resolutions the game scene coincides completely but in some cases when resolution is large then in that case game scene does not cover the mobile screen completely. \$\endgroup\$
    – Shiv
    Commented Apr 26, 2019 at 5:28
  • 1
    \$\begingroup\$ @Shiv the problem is "consistent" is up to you to define. What if on a small device, a button is on the bottom left part of the screen, and behind it there's an object that belongs to the game (and not the UI), and on a device that is twice as wide, you want the button to still be on the bottom left, but the game object to remain on the same spot, so more of the game is visible. How does the game know the difference unless you tell it how to handle it? \$\endgroup\$ Commented Sep 20, 2019 at 9:26

1 Answer 1


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.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .