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

How to hide address bar in mobile web app?

本文关键字：应用程序 隐藏 地址栏 网络 移动网 移动      更新时间：2023-09-26

我正在创建一个移动 Web 应用程序（非本机），我想为我的应用程序使用完整的屏幕高度。问题是浏览器的地址栏占用了大量空间，给我留下了整个屏幕的 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);
}

你可以在这里找到一篇关于如何实现这一点的好文章 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 );

"向下滚动"的javascript技巧应该在iPhone和Android上都有效：

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

不确定其他移动浏览器，但很抱歉。你说的是黑莓，Windows手机等还是更基本的手机？

我通常这样做的方式是：

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

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

试试这个，

对于安卓：

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

对于苹果手机：

<meta name="apple-mobile-web-app-capable" content="yes" />
相关文章：