koobas.hobune.stream
Extend WebGL Canvas to fit browser window with respect to the game's aspect ratio,How to extend extend webGL canvas to fit browser width/height with respect to game aspect ration
Hi dear community,
I'd like to automatically adjust the game canvas to fill the current browser window with respect to game's aspect ratio.
Default canvas width is set to 720px and default canvas height is set to 1280px, so the game aspect ratio is: 16/9
So far I've tried to use: https://forum.unity.com/threads/unity-5-6-download-adaptive-full-browser-window-template.448477/
Without success. The game is definitely fullscreen now, but with extremely violated aspect ratio.
Thanks in advance!
hi @dejwi,
I'm using the below code to fit the game into the browser window - it can be used to make a custom template or to match your index.html file - good luck !
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
canvas {
width: 100%;
height: 100%;
position: absolute;
}
</style>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>%UNITY_WEB_NAME%</title>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%");
</script>
</head>
<body>
<div id="gameContainer" style="width: 100%; height: 100%; position: absolute; margin: auto"></div>
</body>
</html>
I've just added this to the <style></style> section, to avoid ugly padding around the page:
html, body {
margin: 0;
padding: 0;
}
