移动网络应用程序中删除地址栏的跨平台方法答案

【问题标题】：Cross-platform method for removing the address bar in a mobile web app移动网络应用程序中删除地址栏的跨平台方法
【发布时间】：2012-03-29 12:13:17
【问题描述】：

我正在开发一个移动网络应用程序，并试图删除地址栏。它很容易，除非<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。

【问题讨论】：

如果启用了 jquery.. 你可以试试 $(window).height();或 $(document).height();
我都试过了。 $(window) 提供带有地址栏的窗口高度。 $(document) 根据相关页面的高度太短，提供的高度小于该高度。
不久前我也遇到过类似的问题，我强调类似。这段代码真的帮了我大忙：menacingcloud.com/?c=iPhoneAddressBar
其实我以前用过。它适用于 iPhone 并且具有正确的视口。问题是它太具体了，它没有以可靠的跨浏览器跨设备未来证明方式解决问题。
window.innerHeight 在 iOS 中的 window.scrollTo(0,1) 之后变大。这是开源jqTouch lib使用的属性和方法。

标签： javascript jquery android web-applications mobile-safari

【解决方案1】：

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

【讨论】：

我正在寻找页面的可用高度减去地址栏。否则$(window).height() 可以正常工作。
嗯，但这对隐藏地址栏有什么帮助？
因为有些页面的内容很少。所以页面自然可能只有 20px 高。所以滚动到顶部什么都不做。摆脱地址栏的唯一方法是将页面设置为足够高，以便滚动到顶部将其删除。找到那个高度是个问题。
那个高度是窗口的outerHeight.....滚动到顶部，你的意思是底部，对吧？也许您想增加页面高度，但实际上您应该设置它。

【解决方案2】：

This site 也有一些其他建议，但这个严肃、无需担心的建议可在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); });

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

This site 将相同的方法放在超时函数中（理由没有解释，但它声称没有它代码无法正常工作）：

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

【讨论】：

最后一个代码块解决了这一挑战。但它用+50解决了这个问题。我们如何知道地址栏在所有情况下都是 50 像素高？
您因成为第一个真正提供解决方案的人而获得赞誉。
我相信 50px 或多或少是任意的。 scrollTo(0, 1) 语句使得这个额外的量不会简单地产生您在将高度设置得太大时遇到的相同问题。据我所知，正是这两者的结合使它适用于所有情况。
我更改了答案的结构，将最终代码块放在开头，因为据我所知这是最好的解决方案。
@PéterVarga 1 的原因是 iOS 不喜欢 0,0 没有合乎逻辑的原因。