android chrome全屏旋转时向下移动25px答案

【问题标题】：android chrome fullscreen moves 25px down on rotateandroid chrome全屏旋转时向下移动25px
【发布时间】：2016-04-13 12:44:52
【问题描述】：

这个 javascript 和 HTML 会抛出一个带有红色背景的 div。这个外部 div 包含两个内部 div：

(i) 25px 高的绿色条绝对设置在其父级的底部

(ii) 一个“toggleFullScreen”按钮。

当页面加载时，调用 resize_page() 来设置红色 div 的尺寸：

(a) 浏览器客户端窗口或...

(b) 设备屏幕

...取决于 isDocumentInFullScreenMode() 的结果（来自 https://developer.mozilla.org/en-US/docs/Web/API/Document/mozFullScreen 的剪切和粘贴）。

旋转设备（我的是 S3）并再次调用 resize_page() 以使页面适合。

现在单击“切换全屏”按钮调用 toggleFullScreen（从 https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API 剪切和粘贴）并调用 resize_page()再次设置正确的尺寸。

但是，如果我们旋转设备，红色 div 似乎向下移动了 25 个像素，因此绿色 div 消失了。

注意元设置：content="width=device-width, height=device-height, initial-scale=1.0, maximim-scale=1.0, user-scalable=no"

显然，我希望我的整个精心制作的网络应用程序仍然对我的用户可见。但是如何？从屏幕高度移走 25px 将是一种可怕的 hack。

谁能提出更明智的建议？

  <?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>

【问题讨论】：

检查屏幕旋转stackoverflow.com/questions/5498934/… 旋转手机时屏幕调整大小不会触发
更改方向后重新加载页面会怎样？也可以在jsfiddle.net 上发布您的代码并在此处发布，以便人们尝试复制它。
...按照 Tom 的建议确认我的 s3 上的尺寸：(a) 垂直非全屏：559,360 (b) 点击“切换全屏”：640,360 (c) 旋转页面：360,640 (d) 重新加载：335,640
...要清楚：“addEventListener("orientationchange",resize_page,false") 比“window.onresize = resize”差，因为在orientationchange事件中，在非全屏中似乎是在新窗口大小反映在 document.documentElement.clientWidth/Height 之前触发，因此尽管屏幕方向发生了变化，页面仍保持未调整大小。而在全屏模式下，事情就像 onresize 事件一样工作，screen.height/width 是正确的，但外部 div 向下移动了 25px，因此我们应用程序的底部 25px 离开屏幕。
由于 jsfiddle 并不真正适合这种移动测试用例。我将应用程序放在 jsdo.it 上。重现：使用智能手机访问jsdo.it/cricketter/QLjk并点击右上角的“智能手机”按钮

标签： javascript android google-chrome web-applications android-fullscreen

【解决方案1】：

一种可能的解决方法是在orientationchange 事件中退出全屏。随后的窗口调整大小事件导致调用 resize_page() 以使所有内容都适合。不幸的是，我们现在在没有用户要求的情况下退出了全屏模式。尝试：用智能手机访问http://jsdo.it/cricketter/IDSo，然后点击右上角的“智能手机”按钮。

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

【讨论】：