Add this JS to your HTML file’s script area to have it auto resize the game area to fully fit the browser window. This is only useful if you are using a render script in the style of https://github.com/britzl/publicexamples/tree/master/examples/fixed_aspect_ratio
Although the below script could be modified to fit other render scripts, such as ones only meant to be in 4:3.
function resize_game_canvas() {
var app_continer = document.getElementById('app-container');
app_continer.style.width = window.innerWidth;
app_continer.style.height = window.innerHeight;
var game_canvas = document.getElementById('canvas');
game_canvas.width = window.innerWidth;
game_canvas.height = window.innerHeight;
}
resize_game_canvas();
window.addEventListener('resize', resize_game_canvas, false);
window.addEventListener('orientationchange', resize_game_canvas, false);
Adding this CSS will disable the black flashing when tapping the canvas on iOS browser.
div {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
Example in action: https://www.bookofdefold.com/examples/FullWindowCanvas/
You’ll also need to remove the Fullscreen button from the default HTML.
If you have a production game, you’ll probably want to add an overlay which detects if the user is on a mobile device, and suggest them to play the native version relative to their device instead.
For now, as right click in HTML5 is not working, you can disable the right click context menu by modifying your body tag
<body oncontextmenu="return false;">
For Windows 9/10 you’ll need to add some CSS for the canvas so it doesn’t have a border while it has focus.
canvas {
display: block;
outline: none;
border: 0;
}
canvas:focus, canvas:active {
outline: none;
border: 0;
ie-dummy: expression(this.hideFocus=true);
-moz-outline-style: none;
}