Right way to manage stage size for web and mobile
I need to have a single code for web and mobile client. I wrote something lie this:
var renderer;
var stage;
window.onload = function() {
var w = screen.width;
var h = screen.height;
stage = new PIXI.Container();
renderer = PIXI.autoDetectRenderer(w, h);
document.body.appendChild(renderer.view);
}
In my desktop (FullHD screen) w = 1536, h = 864, window.devicePixelRatio = 1.25, but it work correctly.
In my android device (HD screen) w = 360, h = 640, window.devicePixelRatio =
Since there are a few questions about it elsewhere as well, here is an example of how you could do the resizing after listening to the resize event from the window
function scaleScene(renderer, sceneContainer) {
const gameWidth = 960;
const gameHeight = 540;
const gameOrientation = gameWidth > gameHeight ? 'landscape' : 'portrait';
const gameLandscapeScreenRatio = gameWidth / gameHeight;
const gamePortraitScreenRatio = gameHeight / gameWidth;
const isScreenPortrait = window.innerHe