How do I get viewport height units to work in fullscreen mode in Chrome on Android?

Question

I'm writing a game that requires fullscreen mode in a browser. I'm using various divs, makding sure they add up to a total of 100vh. When viewing the page in Chrome on Android, the bottom of the page is not visible. This is known feature. When the user scrolls up, the location bar and tabs at the top disappear and the whole page becomes visible.

Unfortunately, when going to fullscreen mode, the bottom of the page is hidden again. This is bad, as the user cannot scroll up. Consider the following example:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            html, body {
                border: 0;
                padding: 0;
                margin: 0;
                background-color: #fc9;
                width: 100vw;
                height: 100vh;
                overflow: hidden;
            }
            div.fullscreen {
                border: 0;
                padding: 0;
                margin: 0;
                background-color: #446;
                color: #fc9;
                position: absolute;
                width: 98vw;
                height: 98vh;
                left: 1vw;
                top: 1vh;
                line-height: 9.8vh;
            }
        </style>
        
        <script type="text/javascript">
            //<!--
            function goFullScreen()
            {
                if (document.documentElement.requestFullScreen) {  
                    document.documentElement.requestFullScreen();  
                } else if (document.documentElement.mozRequestFullScreen) {  
                    document.documentElement.mozRequestFullScreen();  
                } else if (document.documentElement.webkitRequestFullScreen) {  
                    document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
                } else if (document.documentElement.msRequestFullScreen) {  
                    document.documentElement.msRequestFullScreen();  
                }
            }
            //-->
        </script>

    </head>
    <body>
        <div class="fullscreen" onclick="goFullScreen()">
        --- 0<br/>--- 1<br/>--- 2<br/>--- 3<br/>--- 4<br/>--- 5<br/>--- 6<br/>--- 7<br/>--- 8<br/>--- 9<br/>
        </div>
    </body>
</html>

Viewing this should give me a page with an orange border all around and I should see the numbers 0-9. Clicking in the middle will make it go to fullscreen, and look the same. This works with every browser and device I tested (Firefox, Chrome, Internet Explorer, Konqueror, Dolphin, on Windows, Linux, Android) except Chrome on Android. It also works with Chrome on a desktop PC and with Dolphin on Android. My questions:

Is there a way to make Chrome on Android work like all the other browswer/device combinations? Am I missing anything?
If not, this means I have to query browser and device in the code and adjust the size differently if we're in Chrome/Android. Do you know whether other browser/device combinations show the same behaviour?

This is related to this question, but I'm happy with answers that just list other devices or that confirm this only affects Chrome/Android.

How do I get viewport height units to work in fullscreen mode in Chrome on Android?

0 Answers0