responsive Pixi game responsive for mobile/tablet

[Laumark]

Hi, I'm developing a small HTML5 game for mobile and tablet.
I am not a very seasoned coder. so I hope somebody can help me out here.

I want to make the game fit the screens of different mobile and tablet platforms. How do I do that the best?
Here is a link to an early prototype of the game, without any attempt for it to be responsive http://christianlaumark.dk/codeShop/shopProto1_5.html.

Thanks in advance!

[Exca]

Initialize your renderer with window.innerWidth and window.innerHeight and listen for resize-event. On resize just call renderer.resize(window.innerWidth, window.innerHeight).

After that you have the canvas filling whole screen. Then it's all about what kind of responsivity you want. Easiest way is to scale the game area to fit the screen and add some extra graphics to sides as fillers:
 

//Scale to fit and center
var size = new PIXI.Rectangle(0,0,window.innerWidth, window.innerHeight);
var s = size.width/this.gameArea.width;
if(s > size.height/this.gameArea.height) s = size.height/this.gameArea.height;
this.gameArea.scale.x = this.gameArea.scale.y = s;
this.gameArea.x = Math.round((size.width-this.gameArea.width)/2);

One other way usually used is to have different components each have their own resize-method and the main ui component just gives each component a size they should fit themselves into. For example in your game there's 4 different sections which could each have their own resizes. Something like this:
 

var hideLogo = size.height < HIDE_LOGO_LIMIT;
var split = hideLogo ? 3 : 4;
var componentSize = Math.floor(size.height/split);

this.logo.resize(new PIXI.Rectangle(0,0,size.width, hideLogo? 0 : componentSize));
this.gameView.resize(new PIXI.Rectangle(0,componentSize * (hideLogo?0:1), size.width, componentSize));
this.questionArea.resize(new PIXI.Rectangle(0,componentSize * (hideLogo?1:2), size.width, componentSize));
this.inputArea.resize(new PIXI.Rectangle(0,componentSize * (hideLogo?2:3), size.width, componentSize));

//And in each component the resize method would be something like this
function resize(size){
  this.bg.width = size.width;
  this.bg.height = size.height;
  this.x = size.x;
  this.y = size.y;
  this.text.x = 20;
  this.text.y = 20;
  this.text.style.wordWrapWidth = size.width-40;
}

Then there's also anchor based method where instead of absolute pixel values you align items with values from 0 to 1 in relation to parent. Haven't done those with pixi so cant give a proper example.

You could also scale the game canvas with css to fit the screen, but that might provide ugly results.

[Laumark]

Perfect! I'm going with the easiest way, where I just scale it and fit it. Just what I was looking for, thanks!