虚幻 – HTML5 平台浏览器内全屏问题

问题

众所周知 UE 的 HTML5 平台默认显示如下。

这存在如下几个问题。

• Canvas 只在中间显示。
• 下面有多余的按钮。

解决

1. 将 Canvas 设置为自适应分辨率。

将 Project Settings > Platforms > HTML5 > Canvas Scaling Mode 设置为 Stretch 。

2. 将 Canvas Wrapper 设置为自适应分辨率。

修改 .css 文件中如下一段。

.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;
}

将 Wrapper 上方的留空删除，即删去 margin 属性。
将 Wrapper 左右的留空删除，即删去 max-width 属性。
将最小宽度解除，即删去 min-width 属性。
将高度更改为自适应分辨率，即 height 属性更改为 100% 。
修改后的结果为。

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

3. 移除多余的按钮。

修改 .css 文件中如下一段。

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

设置 display 属性为 none 隐藏显示。

.buttonarea {
    display: none;
}

效果