HTML fullscreen scaling

[kirill1209102]

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):

GGJ is coming up, is HTML5 ready?

@XeduR @vlads I have a big announcement to make, I’m so Happy and excited … I’m celebrating right now literally But First of All: Thank you very much @Qugurun … your code is very important for me specially when I’m creating an app that has to be accessed via a laptop or desktop web browser, because I can’t just tell all users to zoom out to 25%, and i can’t force it programmatically The project I’m working on, has quiet a few objects, and applying your code to it from the beg…

Can someone explain what should be done?

[kakula]

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

[Qugurun]

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";
    }
}

]])

[kirill1209102]

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