Unreal – Full screen issue in HTML5 platform browser

problem

As we all know, UE's HTML5 platform displays the following by default.

There are several problems with this.

• Canvas only displays in the middle.
• There are extra buttons below.

solve

1. Set Canvas to adaptive resolution.

Set Project Settings > Platforms > HTML5 > Canvas Scaling Mode to Stretch.

2. Set the Canvas Wrapper to adaptive resolution.

Modify the following paragraph in the .css file.

.wrapper {
    position: relative;
    margin: 1em auto 10px auto;
    text-align: center;
    min-width: 640px;
    width: 100%;
    height: 480px; /* initial height, will be dynamically adjusted at runtime */
    max-width: 95%;
    display: block;
    align-items: center;
    position: relative;
    text-align: center;
    justify-content: center;
}

Delete the space above Wrapper, that is, delete the margin attribute.
Leave the spaces around Wrapper blank and delete the max-width attribute.
Lift the minimum width, that is, delete the min-width attribute.
Change the height to adaptive resolution, i.e. change the height property to 100%.
The modified result is.

.wrapper {
    position: relative;
    text-align: center;
    width: 100%;
    height: 100%;
    display: block;
    align-items: center;
    position: relative;
    text-align: center;
    justify-content: center;
}

3. Remove redundant buttons.

Modify the following paragraph in the .css file.

.buttonarea {
    min-height: 3%;
    border-top: 0px;
    border-bottom: 0px;
    padding: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

Set the display attribute to none to hide the display.

.buttonarea {
    display: none;
}

effect