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

Question

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

Answer 1

这个网站还有一些其他的建议,但这个严肃,无忧无虑的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); });

这将隐藏地址栏,直到用户滚动.

这个站点在超时函数中放置了相同的方法(没有解释理由,但它声称代码在没有它的情况下不能正常工作):

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