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