在 Windows / Editor 环境里，我们通常会这样控制全屏：
Screen.fullScreen = !Screen.fullScreen;
但当项目切到 WebGL 后，就会遇到各种奇怪问题：
- 第一次点击没反应
- 有时需要点两次才能全屏
- 偶尔直接
abort(-1) - 不同浏览器行为还不一致
很多人第一反应是'是不是 Unity 的 bug'，但其实原因只有一个：WebGL 的全屏是浏览器行为，而不是 Unity 行为。
一、为什么 WebGL 下不能直接用 Screen.fullScreen？
浏览器对'进入全屏'有严格限制：
- 必须由用户手势触发（点击 / 按键）
- 不能在任意时机调用
- 不允许 Unity 在后台随意请求全屏
Screen.fullScreen 在 WebGL 中只是一次尝试性的请求，浏览器有权拒绝它，这就造成了各种'不稳定现象'。
二、正确做法：使用 Unity 官方的 WebGL 全屏接口
WebGL 环境下，请只使用 gameInstance.SetFullscreen(1)。这是 Unity 官方提供的 WebGL 全屏接口，不是 Hack，也不是私有 API。
三、整体实现思路
Unity UI Button 点击（用户手势） ↓ C# 调用 JavaScript（DllImport） ↓ JS 调用 gameInstance.SetFullscreen(1 / 0)
只要保证调用链路来自真实点击事件，浏览器就不会拦截。
四、创建 WebGL 插件（.jslib）
文件路径
Assets/Plugins/WebGL/Fullscreen.jslib
.jslib 的作用是：从 Unity C# 调用 JavaScript 代码
Fullscreen.jslib 内容
mergeInto(LibraryManager.library, {
// 进入全屏
WebGL_SetFullscreen: function () {
// gameInstance 是 Unity WebGL 导出时自动生成的全局对象
if (typeof gameInstance === 'undefined' || !gameInstance) {
console.error('gameInstance not ready');
return;
}
// Unity 官方推荐的 WebGL 全屏方式
// 参数：1 = 全屏，0 = 退出全屏
gameInstance.SetFullscreen(1);
},
// 退出全屏
WebGL_SetMixscreen: function () {
if (typeof gameInstance === 'undefined' || !gameInstance) {
console.error('gameInstance not ready');
return;
}
gameInstance.SetFullscreen(0);
},
});
注意事项：
- 不要自己调用
requestFullscreen - 不要操作 DOM 或 canvas
- Unity 已经帮你处理好了浏览器兼容问题
五、Unity C# 脚本
下面是我项目里实际使用的脚本，支持 Editor / WebGL 双环境。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
#if UNITY_WEBGL && !UNITY_EDITOR
using System.Runtime.InteropServices;
#endif
public class SceneUtilityButtons : MonoBehaviour {
#if UNITY_WEBGL && !UNITY_EDITOR
// 当前是否为全屏状态
private bool state = false;
// 声明 jslib 中的方法
[DllImport("__Internal")]
private static extern void WebGL_SetFullscreen();
[DllImport("__Internal")]
private static extern void WebGL_SetMixscreen();
#endif
// 直接绑定到 Unity Button 的 OnClick
public void OnClickFullscreen() {
#if UNITY_WEBGL && !UNITY_EDITOR
// WebGL 环境下：调用 JS 中的全屏接口
if (!state) WebGL_SetFullscreen();
else WebGL_SetMixscreen();
state = !state;
#else
// 非 WebGL（Editor / PC / Mobile）
Screen.fullScreen = !Screen.fullScreen;
#endif
}
}
使用方式：在 Button 里绑定 OnClickFullscreen() 即可。
六、Canvas 自适应问题：很多人其实卡在锚点
即使你已经正确设置了：
Canvas → UI Scale Mode = Scale With Screen Size- Reference Resolution / Match 配置正确
在 WebGL 下仍然可能出现：
- UI 被遮住
- 全屏前后布局错乱
- 非全屏状态下显示异常
90% 的情况不是 Canvas，而是锚点没设置对。
七、常见 UI 锚点正确设置方式
背景 / 根 Panel
- 锚点：
Stretch（0,0 → 1,1） - Left / Right / Top / Bottom 全部为
0
这是最容易忽视、但最重要的一步。
顶部 UI（Logo、全屏按钮）
- 锚点贴 Top
- 不要使用 Center 锚点
- 不要靠手调 Y 值硬对齐
底部 UI（提示文字、说明信息）
- 锚点贴 Bottom
- 保证在不同分辨率下始终贴底
八、HTML 层面：越简单越稳定
最终我的 HTML 只保留：
width: 100vw;
height: 100vh;
没有额外 resize 逻辑，也没有 JS 强行缩放。
UI 自适应交给 Unity，浏览器只负责显示。
九、总结
WebGL 全屏三条结论：
- 不推荐
Screen.fullScreen - 不要直接调用浏览器全屏 API
- 使用
gameInstance.SetFullscreen
UI 显示问题排查顺序：
- Canvas 设置
- UI 锚点
- 最后才考虑 HTML / JS
WebGL 的坑并不在'技术有多复杂'，而在于它不是桌面程序的思维方式。
顺着 Unity 官方的规则来，很多看起来很玄学的问题，其实一次就能解决。
