本文介绍通过 javascript 动态控制 unity webgl 容器尺寸，强制维持固定宽高比（如 16:9），避免浏览器窗口缩放导致画面拉伸或裁剪，确保游戏 ui 和视觉体验始终一致。
本文介绍通过 javascript 动态控制 unity webgl 容器尺寸，强制维持固定宽高比（如 16:9），避免浏览器窗口缩放导致画面拉伸或裁剪，确保游戏 ui 和视觉体验始终一致。
在 Unity 构建 WebGL 项目后，生成的 index.html 默认将游戏容器（通常为
）设为自适应布局，但缺乏比例约束逻辑。当用户调整浏览器窗口大小时，Canvas 容易被非等比拉伸，造成角色变形、UI 错位或黑边异常——仅靠 CSS 的 min-width/min-height 或 vw/vh 单位无法实现等比缩放+居中适配，因为这些属性不参与宽高比计算，也无法响应动态比例变化。
正确解法是在 HTML 中注入轻量级 JavaScript，实时计算并设置容器尺寸，使其始终以目标宽高比（如 16:9、4:3 或 Unity Player Settings 中设定的分辨率比例）进行等比缩放，并居中显示。
✅ 推荐实现方案（嵌入 index.html）
将以下脚本插入 index.html 的
底部（位于 Unity 加载脚本之后，确保 #unity-container 已存在）：<script>
function resizeGame() {
const container = document.getElementById("unity-container");
if (!container) return;
// 设置目标宽高比（根据你的游戏设计调整，例如 16/9、4/3、1/1）
const targetRatio = 16 / 9;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const windowRatio = windowWidth / windowHeight;
let newWidth, newHeight;
if (windowRatio > targetRatio) {
// 窗口更宽 → 以高度为基准，横向留黑边
newHeight = windowHeight;
newWidth = windowHeight * targetRatio;
} else {
// 窗口更高 → 以宽度为基准，纵向留黑边
newWidth = windowWidth;
newHeight = windowWidth / targetRatio;
}
// 应用尺寸（单位：px）
container.style.width = newWidth + 'px';
container.style.height = newHeight + 'px';
container.style.margin = '0 auto'; // 水平居中（需配合 display: block）
}
// 首次加载时执行，避免闪屏
resizeGame();
// 监听窗口缩放事件
window.addEventListener('resize', resizeGame, { passive: true });
</script>? 关键配置说明
- targetRatio：务必与 Unity 编辑器中 Player Settings → Resolution and Presentation → Default Screen Width/Height 所隐含的比例一致（例如设为 1920×1080 则用 16/9；若为 1280×720，同样适用 16/9）。不匹配将导致预期外的黑边或裁剪。
- CSS 补充建议（添加至 style.css 或
- 性能提示：使用 { passive: true } 提升 resize 事件响应性能；避免在 resize 中频繁触发 Unity API 或 DOM 重排。
⚠️ 注意事项
- 不要修改 Unity 自动生成的 #unity-canvas 样式（如 width/height），应始终操作外层容器 #unity-container，否则会破坏 Unity 内部 Canvas 缩放逻辑；
- 若使用自定义加载页或第三方 WebGL 封装框架，请确认 #unity-container ID 未被更改，否则需同步更新 getElementById 中的选择器；
- 移动端 Safari 等浏览器可能触发两次 resize（键盘弹出/收起），上述代码具备容错性，无需额外节流（如需极致优化，可添加 requestAnimationFrame 防抖）。
该方案零依赖、无侵入、兼容所有现代浏览器，是 Unity WebGL 响应式部署的工业级实践标准。只需一次配置，即可彻底解决因窗口自由缩放引发的画面失真问题，保障跨设备体验一致性。
