本文介绍通过 javascript 动态调整 unity webgl 容器尺寸的方式，强制维持指定宽高比（如 16:9），避免浏览器窗口缩放导致的游戏画面拉伸或裁剪失真。
本文介绍通过 javascript 动态调整 unity webgl 容器尺寸的方式，强制维持指定宽高比（如 16:9），避免浏览器窗口缩放导致的游戏画面拉伸或裁剪失真。
在 Unity 构建 WebGL 项目时，生成的默认 HTML 模板会将游戏画布（
根本解法是绕过 CSS 布局限制，直接用 JavaScript 精确控制容器尺寸，确保其始终按目标宽高比（如 16:9、4:3 或 1:1）等比缩放，并居中显示。以下是推荐实现方案：
✅ 正确做法：在 index.html 中注入响应式缩放脚本
将以下代码插入 index.html 的
底部（ 标签前），确保 DOM 加载完成后再执行：
<script>
function resizeGame() {
const container = document.getElementById("unity-container");
if (!container) return;
// 设置目标宽高比（例如 16:9 → 16/9 ≈ 1.777...）
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;
}
// 应用尺寸并居中（需配合 CSS margin: auto）
container.style.width = newWidth + 'px';
container.style.height = newHeight + 'px';
container.style.margin = 'auto'; // 水平垂直居中
}
// 首次加载时执行，随后监听窗口变化
window.addEventListener('resize', resizeGame, false);
resizeGame();
</script>⚠️ 关键注意事项
- CSS 配合不可少：确保 #unity-container 的 CSS 包含 display: block; margin: auto;，否则 margin: auto 居中无效；同时移除可能冲突的 width/height 固定值或 max-width 限制。
- Unity Player 设置同步：在 Unity 编辑器中，进入 Player Settings → Resolution and Presentation，将 Default Screen Width/Height 设为与脚本中 targetRatio 一致的参考分辨率（如 1920×1080），并勾选 Resize Game Window（此项影响初始 canvas 尺寸逻辑，但最终以 JS 控制为准）。
- 移动端适配补充：iOS Safari 等浏览器存在地址栏动态隐藏问题，可能导致 resize 事件误触发。如需极致兼容，可添加防抖（debounce）逻辑，或监听 orientationchange 事件。
- 性能提示：该脚本执行频率低（仅窗口 resize 时），无性能负担；无需引入第三方库，纯原生 JS 即可稳定运行。
✅ 效果验证
部署后，在不同尺寸浏览器窗口中测试：
- 窗口横向拉宽 → 游戏高度撑满，左右留黑边；
- 窗口纵向拉高 → 游戏宽度撑满，上下留黑边；
- 切换横竖屏、缩放网页（Ctrl+/-）→ 容器实时重算，画面始终保持原始比例，无像素拉伸或压缩。
此方案不修改 Unity C# 代码，不依赖插件，轻量、可靠、跨浏览器兼容，是 Unity WebGL 项目响应式布局的事实标准实践。
