在保持比率的同时动态调整居中的PixiJS画布及其内容的大小

Question

我一直在尝试许多解决方案来找到一种方法来在窗口上居中使用pixiJS画布，这样可以保持比例，并且也可以调整内容的大小。

我想要的只是画布保持他的比例，并且在调整窗口大小时不能缩小。当我们在智能手机或平板电脑上时（当方向是风景时），画布会填满整个窗口。

我能得到的最好的就是这个例子：http://www.thierrygallus.com/game/

我已经使用了媒体查询，但它没有保持比例，并且当我们将窗口的高度减少太多时可以收缩。这是代码：

/* all other device that are really small */
@media (max-width: 576px) {
    .background {
        background-color: #2f3640;    
    }

    .canvas {
        width: 98%;
        margin: 1%;
    }
}

/*Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .background {
        background-color: #2f3640;    
    }

    .canvas {
       width: 98%;
       margin: 1%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .background {
       background-color: #2f3640;    
    }

    .canvas {
       width: 98%;
       margin: 1%;
    }
}

/* all other devices that are big */
@media (min-width: 1200px) {
    .canvas {
       height: 80%;
       width: 80%;
       margin: 4.5% 10%;
       padding: 0;
    }
}

/* NO ROTATION ALERT FOR DEVICES UPPER THAN 992PX (screen computers) */
@media (min-width: 992px) {
    .background {
       width: 100%;
    }

    .rotate-alert {
       display: none;
    }
}

/* DISPLAY FULLSCREEN WHEN DEVICE UNDER 992PX ARE IN LANDSCAPE ORIENTATION */
@media (max-width: 1200px) and (orientation: landscape) {
    html, body {
       height: 100%;
       margin: 0;
    }

    .background {
       background-color: #2f3640;
       width: 100%;
    }

    .canvas {
       height: 96%;
       width: 98%;
       margin: 0.5% 1%;
    }

    .rotate-alert {
       display: none;
    }
}

我认为最好的选择肯定是JavaScript，但我仍然是初学者，我见过的所有小提琴都无法使用。