在移动设备浏览器中隐藏地址栏答案

【问题标题】：Hide address bar in mobile device browser在移动设备浏览器中隐藏地址栏
【发布时间】：2011-05-02 10:17:42
【问题描述】：

我知道一种方法。

<body onload="setTimeout(function() {window.scrollTo(0, 1)}, 100)">
...
</body>

但这只有在页面大到可以滚动时才有效。如果页面适合屏幕，则上述功能将不起作用。在这种情况下如何隐藏地址栏？我需要让它与 iphone、ipad、android 设备一起使用。

【问题讨论】：

这段代码在什么浏览器中隐藏地址栏？
在 iphone 和 android 等移动设备中，地址栏占用了大量空间，我们可以将空间用于页面。
@Pekka — 移动版 Safari（虽然我认为它在最新版本中可能无法使用）
它适用于当前 iOS (5.1 [9B179]) 运行 4s，测试 24/4/2012

标签： html css mobile-safari mobile-website

【解决方案1】：

也许你可以将身体的最小高度设置得更大。 480px 垂直模式屏幕高度 + 60px 地址栏高度 = 540px。

例子：

body { min-height:540px; }     
body[orient="portrait"] { min-height:540px; }
body[orient="landscape"] { min-height:400px; }

【讨论】：

这是个好主意。但是设置最小高度可能是个问题。因为我也从 iPad 访问该页面。如果我将最小高度设置为比 iPad 的高度高一点，我们将在 iPhone 上看到一个大的滚动视图。
我不确定，但我认为在 iPad 上隐藏地址栏是不可能的。所以你可以将它设置为 iPhone 的最小高度。
这确实有帮助。我目前正在通过获取屏幕的视口高度并向其添加 60px 来设置最小高度。
我试过这个。这适用于纵向模式，但不适用于带有 android chrome 33 的横向模式。

【解决方案2】：

iPhone：

仅当移动“应用程序”添加到主屏幕时才有效（通过加号图标 -> 添加到主屏幕）

<meta name="apple-mobile-web-app-capable" content="yes" />

我没有使用其他移动操作系统的经验，但是通过 Google 快速搜索 hide browser url bar android 得到了与您的类似的解决方案，带有 window.scrollTo。

【讨论】：

确实，如果您只想让人们访问您的应用程序 url 并立即使用它，这绝对不是解决方案。

【解决方案3】：

来自http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/我发现

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); 
        document.body.style.height = 'auto'; 
      }, 50 );
  }
}

稍作修改

在某些浏览器中运行良好，但至少我无法让它在 Android Chrome 上运行。

【讨论】：

【解决方案4】：

只需在页面末尾添加“BR”即可。或者您可以将 jqueryUI 与 div height 100% 一起使用

【讨论】：