Hello.
I'm scaling WebGL canvas according to the size of the browser window as below.
This works well as I want, but the game performance becomes quite bad when the canvas is big, especially when playing on Android mobile.
On the other hand, when I pinch out the mobile screen and make the canvas big without using these JavaScript and CSS, the game performance doesn't become bad, and it doesn't reduce the resolution. So this is exactly what I want.
I'd like to have this performance with the canvas fitting to the window without pinching out manually.
Is there any way to scale the WebGL canvas without making the performance bad?
Thank you.
----------
HTML:
Unity WebGL Player | soap7
style.css:
h1 {
width: 360px;
height: 640px;
margin: auto;
}
script.js:
window.onload = function(){Resize();}
window.onresize = function(){Resize();}
function Resize()
{
var gameWidth = 360;
var gameHeight = 640;
var h1 = document.getElementById( 'unityContainer' );
var width, height;
var gameRatio = gameWidth / gameHeight;
var windowRatio = window.innerWidth / window.innerWidth;
if(gameRatio > windowRatio )
{
width = window.innerWidth;
height = width / gameRatio;
}
else
{
height = window.innerHeight;
width = height * gameRatio;
}
h1.style.width = width + 'px';
h1.style.height = height + 'px';
}
