本文介绍通过 javascript 动态控制 unity webgl 容器尺寸的方法，确保游戏始终按固定宽高比（如 16:9）自适应浏览器窗口，避免因窗口缩放导致的画面拉伸或裁剪失真。
本文介绍通过 javascript 动态控制 unity webgl 容器尺寸的方法，确保游戏始终按固定宽高比（如 16:9）自适应浏览器窗口，避免因窗口缩放导致的画面拉伸或裁剪失真。
Unity WebGL 构建后默认以
正确方案是：在 index.html 中注入轻量级 JavaScript，监听窗口尺寸变化，实时计算并设置容器的精确宽高，使其始终满足预设比例（例如 16:9），同时利用 CSS 实现居中与背景填充，保障视觉完整性。
✅ 推荐实现步骤
确认容器 ID：检查你的 index.html 中 Unity 容器元素是否具有 id="unity-container"（默认 Unity 模板中存在）。若已自定义（如 id="game-root"），请同步修改脚本中的 getElementById 参数。
-
插入响应式缩放脚本：将以下代码置于 index.html 的
底部（ 前），确保 DOM 加载完成后再执行：
<script>
function resizeGame() {
const container = document.getElementById("unity-container");
if (!container) return;
const targetRatio = 16 / 9; // ← 根据你的游戏设计修改（如 4/3、1/1）
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;
}
container.style.width = `${newWidth}px`;
container.style.height = `${newHeight}px`;
container.style.margin = 'auto'; // 水平垂直居中（需配合 display: block）
}
// 首次加载 + 窗口缩放时触发
window.addEventListener('load', resizeGame);
window.addEventListener('resize', resizeGame);
</script>- 补充关键 CSS 样式（在 style.css 或
/ 可选：强制 canvas 填满容器且不拉伸 /
unity-canvas {
width: 100% !important; height: 100% !important; display: block; }
> ⚠️ 注意事项： > - **不要**在 Unity Player Settings 中启用 “Resize Game View to Window Size”（WebGL 设置页），该选项会干扰 JS 控制逻辑；应保持关闭。 > - 若使用自定义加载屏或多容器结构，请确保脚本作用于最终包裹 `<canvas>` 的最外层容器。 > - 对于移动端 Safari，建议添加 `viewport` meta 标签以禁用双击缩放干扰： > `<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">` > - 如需全屏无黑边（牺牲部分画面），可改用 `object-fit: cover` 配合 `100vw/100vh`，但会丢失内容完整性，不推荐用于 UI 敏感型游戏。 该方案完全脱离 Unity 引擎运行时干预，纯前端实现，兼容所有现代浏览器，性能开销极低（仅重设 CSS 尺寸），是 Unity WebGL 项目上线前必须配置的基础适配环节。
