How to make responsive Phaser app

[Finders_Keepers]

Hello friends,

I want to know how are you making your games responsive to landscape and portrait orientations like a website. I want all the buttons and background elements to stay the same ratio in both orientations. My buttons and background are stretching in both orientations. I have made my canvas 100% in css.I was using Phaser.ScaleManager.showall and i also tried .RESIZE. Resize causes the game background and buttons to float in space.

[Umz]

Scale the buttons according to the width or height. That way they will always be your desired with or height and keep their ratio.

var scaleByWidth = function(object, desired) {
  var scale = desired / object.width;
  object.scale.set(scale);
}

Or use absolute values.