Sign in to follow this  
aldrin.thomas

setting up design resolution for mobile browsers

Recommended Posts

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;
    }; 

 

Share this post


Link to post
Share on other sites

There was a similar problem too, so thanks a lot for the info. Very helpful. If possible, I would like to share the service I use https://gapsystudio.com/ . I can say that the guys are very qualified specialists, perform their work efficiently and on time. The quality can be judged by their portfolio. I ordered a logo from them and they helped in the design for the mobile app.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.