android chrome fullscreen moves 25px down on rotate

问题

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>

回答1:

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();
        }
 }

来源：https://stackoverflow.com/questions/34683742/android-chrome-fullscreen-moves-25px-down-on-rotate

标签

javascript

android

google-chrome

web-applications

android-fullscreen