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

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

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

我尝试：允许

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

JQUERY。

来源

2012-03-13 Fresheyeball

如果启用jQuery的..ü可以试试$ （窗口）.height（）;或 $（document）.height（）; – 2012-04-01 17:55:26

我已经尝试了两个。 $（窗口）提供窗口的高度WITH地址栏。根据问题页面的高度太短，$（文档）提供的高度小于该高度。 – Fresheyeball 2012-04-01 19:11:15

不久前我也有类似的问题，我强调类似。这段代码真的帮了我很大的忙：http://menacingcloud.com/?c=iPhoneAddressBar – 2012-04-01 19:34:34

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（）方法：

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

This site地方超时功能中同样的方法（该理由没有解释，但它声称的代码不会没有它很好地工作）：

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

来源

2012-04-01 19:41:48 ramblinjan

最后一个代码块解决了这个问题。但它用+50来解决它。在所有情况下，我们如何知道地址栏高度为50px？ – Fresheyeball 2012-04-01 19:45:12

作为第一个真正提供解决方案的人，你会得到满意的结果。 – Fresheyeball 2012-04-01 19:48:37

我相信50px或多或少是任意的。 scrollTo（0,1）语句使得这个额外的数量不会简单地创建您在设置高度过大时遇到的相同问题。就我所知，这两者的结合使它在所有情况下都能正常工作。 – ramblinjan 2012-04-01 19:51:07

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

来源

2012-04-01 19:37:45

我正在寻找页面的可用高度减去地址栏。否则'$（window）.height（）'会正常工作。 – Fresheyeball 2012-04-01 19:39:06

嗯，但这是如何帮助隐藏地址栏？ – 2012-04-01 19:41:09

因为有些页面内容很少。所以页面自然可能只有20px高。所以滚动到顶部什么都不做。摆脱地址栏的唯一方法是将页面样式设置得足够高，以至于滚动到顶部会将其删除。发现高度是问题。 – Fresheyeball 2012-04-01 19:47:54

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

回答

相关问题