用于移除移动Web应用程序中的地址栏的跨平台方法

Question

我正在开发一个移动网络应用程序，我正在尝试删除地址栏。 它很容易，除非<body>的自然高度不够高，不允许滚动。 尝试我可能找不到可靠的iphone / android，交叉设备方法确保<body>足够高以允许地址栏消失。 我见过的许多方法都依赖于screen.height ，这使得页面比它需要的更加清晰。 它应该非常高，足以让地址栏消失，不会更高！

有没有人有一个完美处理这个的脚本？ 我需要确定页面的高度减去iphone和android的地址栏。

我试过了：

screen.height //too tall
window.innerHeight //too short
document.documentElement.clientHeight //too short
document.body.clientHeight //almost but too short

允许JQUERY。

Answer 1

这个网站还有一些其他建议，但这个严肃，无忧无虑的github：gist并回答你的问题（为方便起见粘贴在这里）：

function hideAddressBar()
{
  if(!window.location.hash)
  {
      if(document.height < window.outerHeight)
      {
          document.body.style.height = (window.outerHeight + 50) + 'px';
      }

      setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
  }
}

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );

据我所知，添加到页面的额外高度（导致问题）和scrollTo（）语句的组合使地址栏消失。

从同一站点，隐藏地址栏的“最简单”解决方案是使用scrollTo（）方法：

window.addEventListener("load", function() { window.scrollTo(0, 1); });

这将隐藏地址栏，直到用户滚动。

这个站点在超时函数中放置了相同的方法（没有解释理由，但它声称代码在没有它的情况下不能正常工作）：

// When ready...
window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
    window.scrollTo(0, 1);
  }, 0);
});

Answer 2

我认为它的工作方式是当页面不适合时隐藏地址栏。 所以你想要一个页面正好是窗口的高度，包括地址栏，即window.outerHeight ，不是吗？

用于移除移动Web应用程序中的地址栏的跨平台方法

问题描述

2 个解决方案

解决方案1
5 已采纳 2012-04-01 19:41:48

解决方案2
1 2012-04-01 19:37:45

用于移除移动Web应用程序中的地址栏的跨平台方法

问题描述

2 个解决方案

解决方案1 5 已采纳 2012-04-01 19:41:48

解决方案2 1 2012-04-01 19:37:45

解决方案1
5 已采纳 2012-04-01 19:41:48

解决方案2
1 2012-04-01 19:37:45