如何在移动网络应用程序中隐藏地址栏？答案

【问题标题】：How to hide address bar in mobile web app?如何在移动网络应用程序中隐藏地址栏？
【发布时间】：2012-05-16 20:07:53
【问题描述】：

我正在创建一个移动网络应用程序（非本机），我想为我的应用程序使用完整的屏幕高度。问题是浏览器的地址栏占了很大的空间，给我留了整个屏幕的4/5左右。

我已经制作了我的应用程序，因此永远不会有任何滚动，该网站始终适合用户屏幕的高度。我真正追求的是 facebook 移动网站的功能。它向下滚动以隐藏地址栏。

对于 Android 设备和 Iphone，以及在不同的移动浏览器（不同的地址栏大小），是否有任何通用的方法？

顺便说一句：我正在使用 Iscroll4 来获取固定的页脚和页眉。

编辑：这是我最终得到的代码。我添加了两个按钮让用户选择是否使用全屏模式。此代码与 Iscroll4 和 Jquery 结合使用。

<script type="text/javascript">
$(document).ready(function() {
    var fullscreen = false;

    if(fullscreen==false)
    {
        window.removeEventListener("orientationchange", function(){ hideAddressBar(); } );
        window.addEventListener("orientationchange", function(){ showAddressBar(); } );
    }
    else
    {
        window.removeEventListener("orientationchange", function(){ showAddressBar(); } );
        window.addEventListener("orientationchange", function(){ hideAddressBar(); } );
    }

    $('#fullscreen').click(function(){
       hideAddressBar();
       fullscreen = true;
    });
    $('#normalscreen').click(function(){
       showAddressBar();
       fullscreen = false;
    });

});
function hideAddressBar()
{
    document.body.style.height = (window.outerHeight + 20) + 'px';
    window.scrollTo(0, 1);
}
function showAddressBar()
{
    document.body.style.height = (window.outerHeight - 20) + 'px';
    window.scrollTo(0, 0);
}

【问题讨论】：

标签： php javascript jquery html css

【解决方案1】：

您可以在http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/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); }, 50 );
  }
}

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

【讨论】：

【解决方案2】：

“向下滚动”javascript 技巧应该适用于 iPhone 和 Android：

http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/

虽然很抱歉，但不确定其他移动浏览器。您是指黑莓、Windows phone 等还是更基本的手机？

【讨论】：

在 Android（和 Iphone？）上，您可以下载任何您想要的浏览器应用程序，并将其用作默认设置。所有这些浏览器的地址栏都有不同的高度。我主要针对 Android 和 Iphone 用户，而不是黑莓或 Windows Phone。顺便说一句，很棒的链接！

【解决方案3】：

我通常这样做的方式是：

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

但它只有在页面足够长可以向下滚动一点时才会起作用。

【讨论】：

是的，我也在网上找到了这个解决方案，但它不符合我的需求，因为我的应用不会有任何滚动。
其实我觉得这篇文章很有帮助，所以忽略我之前的评论:)

【解决方案4】：

试试这个，

对于安卓：

if(navigator.userAgent.match(/Android/i)){
    window.scrollTo(0,1);
 }

对于 iPhone：

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

【讨论】：

Iphone 不是只有原生 Iphone 应用可用吗？
绝对不，它是一个元标记。看看这个luscarpa.com/development/…
window.scrollTo(0,1); 在我的 Android 设备上不起作用。 if 语句返回 true。
我知道您使用的是iScroll插件，所以它不起作用。
您的 javascript 会隐藏地址栏，还是只是向下滚动？如果它确实向下滚动，我可能会比使用 Iscroll 更好地使用 Jquery。