resize window

[Harryk89]

Hi! I need help, I need it when the screen is rotated, all the children have kept their size, but the background has been adjusted to the screen size. 

 

I have code

let app = new PIXI.Application({ 
	width: window.innerWidth, 
	height: window.innerHeight,
	autoResize: true,
	resolution: devicePixelRatio 
});
document.body.appendChild(app.view);

function resize() {

	app.view.style.width = window.innerWidth + 'px';
	app.view.style.height = window.innerHeight + 'px';

}

window.onresize = resize;

The last figure shows what is happening now.

[ivan.popelyshev]

use "app.renderer.resize" , its a bit more than just CSS adjust. also autoResize:true" means that pixi will do that adjust itself.

[Harryk89]

if i use

app.renderer.resize(window.innerWidth, window.innerHeight);

get it

[jonforum]

what about

 

//this is the class _app extends PIXI.Application

document.body.onresize = () => { this.scaleToWindow() };

    scaleToWindow() {
        const canvas = this.view; // PIXI.Application.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;
    };