0

This javascript and HTML throws up a div with a red background. This outer div contains two inner divs:

(i) A 25px high green bar set absolutely to the bottom of its parent

(ii) A "toggleFullScreen" button.

When the page loads, resize_page() is called to set the dimensions of the the red div fit either:

(a) the browser client window or...

(b) the device screen

...depending on the result of isDocumentInFullScreenMode() (cut-and-paste from https://developer.mozilla.org/en-US/docs/Web/API/Document/mozFullScreen).

Rotate the device (mine's an S3) and resize_page() gets called again to make the page fit nicely.

Now click on the "Toggle Fullscreen" button to call toggleFullScreen (cut-and-paste from https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) and resize_page() is called again to set the correct dimensions.

But then if we rotate the device it seems that the red div is moved down exactly 25 pixels and accordingly the green div disappears.

Note the meta settings : content="width=device-width, height=device-height, initial-scale=1.0, maximim-scale=1.0, user-scalable=no"

Obviously I would like the whole of my carefully crafted web app to still be visible to my user. But how ? Take away 25px from the screen height would be one horrible hack.

Can anyone suggest something more sensible ?

  <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
        "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximim-scale=1.0, user-scalable=no"/>
    <base target="_top">


<script language="JavaScript">
window.onload = resize_page;
window.onresize = resize_page;

function resize_page() {
    var main_div = document.getElementById('main');

    if (isDocumentInFullScreenMode())
    {
        var height = screen.height;
        var width = screen.width;
        main_div.style.height = height + 'px';
        main_div.style.width = width + 'px';
    }
    else
    {
        var height = document.documentElement.clientHeight;
        var width = document.documentElement.clientWidth;
        main_div.style.height = height + 'px';
        main_div.style.width = width + 'px';
    }
}

function ToggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}
function isDocumentInFullScreenMode() {
  // Note that the browser fullscreen (triggered by short keys) might
  // be considered different from content fullscreen when expecting a boolean
  return ((document.fullscreenElement && document.fullscreenElement !== null) ||    // alternative standard methods
      document.mozFullScreen || document.webkitIsFullScreen);                   // current working methods
}
</script>

</head>
<body>
<div id="main" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:#aa0000;">
<div style="position:absolute;top:50px;left:50px;width:200px;height:50px;background-color:#0000aa;font-size:15px" onclick="ToggleFullScreen()">Toggle Fullscreen</div>
<div style="position:absolute;bottom:0px;left:0px;right:0px;height:25px;background-color:#00aa00"></div>
</div>
</body>
</html>
Cricketter
  • 1
  • 1
  • Check for screen rotation http://stackoverflow.com/questions/5498934/detect-change-in-orientation-using-javascript screen resize will not fire when rotating phone – Adam Buchanan Smith Jan 08 '16 at 18:47
  • What happens if you reload the page after changing orientation? Also post your code on https://jsfiddle.net/ and post it here so people can try to reproduce it. – TomTasche Jan 08 '16 at 19:37
  • ...to confirm here's the sizings on my s3 following Tom's advice: (a) vertical non-fullscreen: 559,360 (b) hit "toggle fullscreen":640,360 (c) rotate the page: 360,640 (d) reload: 335,640 – Cricketter Jan 08 '16 at 20:16
  • ...to be clear: "addEventListener("orientationchange",resize_page,false") is worse than "window.onresize = resize" since in the orientationchange event, in non-fullscreen seems to be triggered before the new window size has been reflected in document.documentElement.clientWidth/Height and so the page remains unresized despite the screen orientation change. Whereas in fullscreen mode things work just as with the onresize event and screen.height/width is correct but the outer div is shifted down 25px and so the bottom 25px of our app go off-screen. – Cricketter Jan 08 '16 at 23:32
  • Since jsfiddle is not really suitable for this kind of mobile test case. I placed the app on jsdo.it instead. To reproduce: access http://jsdo.it/cricketter/QLjk using a smart phone and click on the "smart phone" button top right – Cricketter Jan 10 '16 at 12:21

1 Answers1

0

One possible workaround is to get out of fullscreen on an orientationchange event. The subsequent window resize event results in a call to resize_page() to make everything fit. Unfortunately we have now exited fullscreen mode without our user asking for this. To try: access http://jsdo.it/cricketter/IDSo with a smart phone and click on the "smart phone" button on the upper right.

 window.addEventListener("orientationchange",unFullscreen,false);
 function unFullscreen() {
        if (isDocumentInFullScreenMode())
        {
            ToggleFullScreen();
        }
 }
Cricketter
  • 1
  • 1