How to do full screen for phaser 3

Phaser 3
1

I am using latest phaser.

I want to know how it’s possible to have full screen. By full screen, i mean i want the game to use the whole space of the parent div element.

This is the config I have

var config = {
            type: Phaser.WEBGL,
            scale: {
                mode: Phaser.Scale.Fit,
                autoCenter: Phaser.Scale.CENTER_BOTH,
                parent: parentDiv,
                width: 1920,
                height: 1080
            },

            parent: parentDiv,
        };

If i use this config and set the style (width:100%, height:100%) to the parent div, what happens is the game is still not shown on the whole screen. It’s shown in the middle. Even though, parent element uses the whole screen. Is this a correct behaviour? I want my game to have full screen for all screen sizes.

Any idea ? is this a good practice? I don’t want to use custom functions for that.

2

It’s Phaser.Scale.FIT, not Phaser.Scale.Fit. Property names in JavaScript are case sensitive.

3

This still doesn’t solve this. Any other ideas?

4

Verify that the game canvas is actually inside the parent element.

Verify the actual dimensions of the parent element.

5

And see http://labs.phaser.io/100.html?src=src/scalemanager/fit%20with%20auto%20center.js.

6

It’s in there. As much as I can understand, FIT means that it might not actually use the whole available space of the parent. Maybe this is why this is happening. what i want it to do is scale and also fill the whole space of the parent.