UnityWebGL保持画面比例不拉伸方法

本文详解了如何通过轻量级 JavaScript 脚本动态控制 Unity WebGL 容器尺寸，精准维持预设宽高比（如 16:9），彻底解决浏览器窗口缩放导致的画面拉伸、UI 错位和摄像机畸变等顽疾——不依赖 Unity 运行时设置，无需复杂 CSS 计算，仅需几行代码即可实现等比缩放+自动居中+黑边填充的工业级适配效果，是每个 Unity WebGL 项目上线前不可或缺的前端优化实践。

本文介绍通过 JavaScript 动态控制 Unity WebGL 容器尺寸的方法，确保游戏始终按固定宽高比（如 16:9）自适应浏览器窗口，避免因窗口缩放导致的画面拉伸或裁剪失真。

本文介绍通过 JavaScript 动态控制 Unity WebGL 容器尺寸的方法，确保游戏始终按固定宽高比（如 16:9）自适应浏览器窗口，避免因窗口缩放导致的画面拉伸或裁剪失真。

Unity WebGL 构建后默认以 元素渲染游戏内容，其容器（通常为 #unity-container）若未做约束，会随浏览器窗口自由拉伸，造成画面畸变——尤其当用户调整浏览器大小或使用非目标分辨率设备时，UI 错位、角色变形、摄像机视野异常等问题频发。仅靠 CSS 的 min-width / min-height 或 vw/vh 单位无法实现等比缩放+居中适配，因为它们无法动态维持宽高比约束。

正确方案是：在 index.html 中注入轻量级 JavaScript，监听窗口尺寸变化，实时计算并设置容器的精确宽高，使其始终满足预设比例（例如 16:9），同时利用 CSS 实现居中与背景填充，保障视觉完整性。

✅ 推荐实现步骤

1. 确认容器 ID：检查你的 index.html 中 Unity 容器元素是否具有 id="unity-container"（默认 Unity 模板中存在）。若已自定义（如 id="game-root"），请同步修改脚本中的 getElementById 参数。

2. 插入响应式缩放脚本：将以下代码置于 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>

3. 补充关键 CSS 样式（在 style.css 或