javascript - Canvas on mobile browsers is not fullscreen

Question

I'm trying to make a web game based on canvas and vanilla JS, but i'm struggling with displaying my canvas on mobile devices. On window.onload I'm assignin window height and width to the canvas dimensions. On PC it looks and works great but unfortunately while displayin on phone I have some bad white spaces under it or left site.

const CANVAS_ID = "game";

let canvas, canvasContext;
let bullets = [];
window.onload = function(){
    resizeCanvas();
    canvas = document.getElementById(CANVAS_ID);
    canvasContext = canvas.getContext('2d');
    resetGame();
    document.getElementById('overlay').style.display = "none";
}

function resizeCanvas (){
    let canvas = document.getElementById(CANVAS_ID);
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

function resetGame (){
    colorRect (0,0, canvas.width,canvas.height, "black");
    canvasContext.font = "100px Arial";
    //colorText("Welcome", 100, canvas.height/2, "white");
    setInterval(drawGame, 1000/60);
    setInterval(spawnBullet, 100);
}

Do you have any ideas what should I do?

Edit. I have <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;"/> this tag.Is it correct?

question from:https://stackoverflow.com/questions/66049307/canvas-on-mobile-browsers-is-not-fullscreen

Answer 1

Waitting for answers