首页 > 文章 > 前端

UnityWebGL画面比例保持方法

时间：2026-03-01 13:52:05 226浏览收藏

本文揭秘了 Unity WebGL 项目中保持画面比例不变形的核心方案：通过轻量级 JavaScript 动态计算并设置容器尺寸，严格锁定目标宽高比（如 16:9），智能适配任意浏览器窗口缩放——既避免 UI 错位、角色拉伸等视觉灾难，又杜绝无效黑边或意外裁剪，配合简单的 CSS 配置即可实现零依赖、高性能、全平台兼容的工业级响应式体验，让玩家无论在桌面还是移动端都能享受原汁原味的游戏画面。

如何在 Unity WebGL 中保持游戏画面比例不变（防拉伸变形）

本文介绍通过 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 或