koobas.hobune.stream
Scale WebGL cavas to browser window size
I'm trying to scale Unity WebGL content based on the contents of the window. I could manage this on Unity 5.5.4, with the following HTML.
<style type="text/css" media=screen>
* {
margin: 0;
padding: 0;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
}
body {
background-color: #222C36;
}
</style>
</head>
<body>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script type='text/javascript'>
var Module = {
TOTAL_MEMORY: 268435456,
errorhandler: null, // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
compatibilitycheck: null,
backgroundColor: "#222C36",
splashStyle: "Light",
dataUrl: "Build/Build.data",
codeUrl: "Build/Build.js",
asmUrl: "Build/Build.asm.js",
memUrl: "Build/Build.mem",
};
</script>
<script src="Build/UnityLoader.js"></script>
</body>
The problem is, if I try this same method on Unity 2017.2, using the following...
<style type="text/css" media=screen>
* {
margin: 0;
padding: 0;
}
#gameContainer {
width: 100%;
height: 100%;
position: absolute;
}
body {
background-color: #222C36;
overflow: hidden;
}
</style>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Build.json");
</script>
</head>
<body>
<div id="gameContainer"></div>
</body>
It correctly scales when it initially loads, but if the window is resized while it is running, it will no longer automatically update the resolution, whereas it did on the previous version. Is this something that's possible, or it is a limitation of the way WebGL is handled by Unity? A solution that would dynamically resize, or even just scale the content would be appreciated.
I'm also having this problem in 2017.2. Did you find a solution?
No solution yet? I've found another tread about it, but i couldn't manage to make it work. http://answers.unity3d.com/questions/1336800/scale-unity-webgl-canvas-to-fit-browser-window.html
I managed to do it setting the canvas to 100% as well, just like you did in the first example, together with the gameContainer and body. Everything to 100%
