HTML fullscreen scaling

Beta Testing HTML5
1

I’m happy with how HTML5-build is mobile responsive.

However, I still have one question about scaling.
I’m using JS to allow the user to enable fullscreen mode on a mobile phone

 if (!document.fullscreenElement) {
 document.documentElement.requestFullscreen();
 } else if (document.exitFullscreen) {
 document.exitFullscreen();
 }

However, this completely confuses the position and size of all objects on the page in a mobile browser.

The tips listed here don’t help (including forced use of the onResize() method):

Can someone explain what should be done?

2

I think you need to programmatically change positioning of all objects based on the resize event, which will be a killer task specially if your app is a game … for business apps it might be a lot easier

My advice is to fix the size and disallow user to change the screen size unless it makes a big difference like baby hazel games Baby Hazel Halloween Castle | Play Baby Hazel Halloween Castle on PrimaryGames

4

Add this code, test it and let me know.

browser.JS([[
if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
    document.addEventListener('MSFullscreenChange', handleFullscreenChange);
}

function handleFullscreenChange() {
    if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
        let canvas = document.getElementById("canvas");
		canvas.style.width = screen.width + "px";
		canvas.style.height = screen.height + "px";
    } else {
        let canvas = document.getElementById("canvas");
		canvas.style.width = window.innerWidth + "px";
		canvas.style.height = window.innerHeight + "px";
    }
}

]])
5

Sorry for the late reply! This works fine. Thanks)