4

目前我正在编写某种网络应用程序，我想隐藏 iOS 设备上的地址栏，最好也隐藏在 Android 设备上。
通常我这样做

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

但这现在不起作用，因为页面没有足够的内容来滚动。
现在我知道这是一个常见问题，并且我知道有多种解决方案，但我更喜欢一个小型、防弹的解决方案。
实际上，当我发现这个问题时，我很高兴：http ://stackoverflow.com/questions/9678194/cross-platform-method-for-removing-the-address-bar-in-a-mobile-web-app

此代码的发布位置： 

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 );

不幸的是，这对我不起作用。我看到发生了一些事情，因为某些padding-top以百分比设置的元素向下移动，但地址栏仍然存在。

当然，我也进行了谷歌搜索并尝试了我找到的许多片段。有些什么也没做，有些只是将元素padding-top向下移动了一点。
我发现的唯一工作代码是：

var page = document.getElementById('page'),
    ua = navigator.userAgent,
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
    ipad = ~ua.indexOf('iPad'),
    ios = iphone || ipad,
    // Detect if this is running as a fullscreen app from the homescreen
    fullscreen = window.navigator.standalone,
    android = ~ua.indexOf('Android'),
    lastWidth = 0;

if (android) {
  // Android's browser adds the scroll position to the innerHeight, just to
  // make this really difficult. Thus, once we are scrolled, the
  // page height value needs to be corrected in case the page is loaded
  // when already scrolled down. The pageYOffset is of no use, since it always
  // returns 0 while the address bar is displayed.
  window.onscroll = function() {
    page.style.height = window.innerHeight + 'px'
  } 
}
var setupScroll = window.onload = function() {
  // Start out by adding the height of the location bar to the width, so that
  // we can scroll past it
  if (ios) {
    // iOS reliably returns the innerWindow size for documentElement.clientHeight
    // but window.innerHeight is sometimes the wrong value after rotating
    // the orientation
    var height = document.documentElement.clientHeight;
    // Only add extra padding to the height on iphone / ipod, since the ipad
    // browser doesn't scroll off the location bar.
    if (iphone && !fullscreen) height += 60;
    page.style.height = height + 'px';
  } else if (android) {
    // The stock Android browser has a location bar height of 56 pixels, but
    // this very likely could be broken in other Android browsers.
    page.style.height = (window.innerHeight + 56) + 'px'
  }
  // Scroll after a timeout, since iOS will scroll to the top of the page
  // after it fires the onload event
  setTimeout(scrollTo, 0, 0, 1);
};
(window.onresize = function() {
  var pageWidth = page.offsetWidth;
  // Android doesn't support orientation change, so check for when the width
  // changes to figure out when the orientation changes
  if (lastWidth == pageWidth) return;
  lastWidth = pageWidth;
  setupScroll();
})();

资源

但我对这个解决方案并不满意，因为我不是 UA 嗅探的朋友。

你有什么建议我可以在没有 UA 嗅探的情况下让它工作吗？可能是我的 HTML 导致我发布的一些脚本出现问题吗？

4

1 回答 1

1

不知道它是否防弹，但它适用于一堆设备。如果您发现警告，请告诉我。

if (((/iphone/gi).test(navigator.userAgent) || (/ipod/gi).test(navigator.userAgent)) &&
    (!("standalone" in window.navigator) && !window.navigator.standalone)) {
    offset = 60;
    $('body').css('min-height', (window.innerHeight + offset) + 'px');
    setTimeout( function(){ window.scrollTo(0, 1); }, 1 );
}

if ((/android/gi).test(navigator.userAgent)) {
    offset = 56;
    $('html').css('min-height', (window.innerHeight + offset) + 'px');
    setTimeout( function(){ window.scrollTo(0, 1); }, 0 );
}
于 2013-10-18T17:58:06.923 回答