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