setting up design resolution for mobile browsers

[aldrin.thomas]

Hey,

      Could anybody help me with setting up a design resolution for mobile browsers coz I'm messed up with these size issues on mobile.

[jonforum]

set your app game resution and create a method for rescale

class _app extends PIXI.Application {
    constructor() {
        super({
            width: 1920, 
            height: 1080,                       
          });
          this.nwjs = this.isNwjs() && this.initNwjs();
          document.body.onresize = () => { this.scaleToWindow() };
    };


    requestFullScreen() {
        var element = document.body;
        if (element.requestFullScreen) {
            element.requestFullScreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
        this._fullScreen = true;
    };

    cancelFullScreen() {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        this._fullScreen = false;
    };
    

    scaleToWindow() {
        const canvas = this.view;
        let scaleX, scaleY, scale, center;
        scaleX = window.innerWidth / canvas.offsetWidth;
        scaleY = window.innerHeight / canvas.offsetHeight;
        scale = Math.min(scaleX, scaleY);
        canvas.style.transformOrigin = "0 0";
        canvas.style.transform = "scale(" + scale + ")";
        if (canvas.offsetWidth > canvas.offsetHeight) {
          if (canvas.offsetWidth * scale < window.innerWidth) { center = "horizontally" } 
          else { center = "vertically" };
        } else {
            if (canvas.offsetHeight * scale < window.innerHeight) { center = "vertically" } 
            else { center = "horizontally"; };
        };
        let margin;
        if (center === "horizontally") {
          margin = (window.innerWidth - canvas.offsetWidth * scale) / 2;
          canvas.style .marginTop = 0 + "px";canvas.style .marginBottom = 0 + "px";
          canvas.style .marginLeft = margin + "px";canvas.style .marginRight = margin + "px";
        };
        if (center === "vertically") {
          margin = (window.innerHeight - canvas.offsetHeight * scale) / 2;
          canvas.style .marginTop = margin + "px";canvas.style .marginBottom = margin + "px";
          canvas.style .marginLeft = 0 + "px";canvas.style .marginRight = 0 + "px";
        };
        canvas.style.paddingLeft = 0 + "px";canvas.style.paddingRight = 0 + "px";
        canvas.style.paddingTop = 0 + "px";canvas.style.paddingBottom = 0 + "px";
        canvas.style.display = "-webkit-inline-box";
        return scale;
    };