javascript – 隐藏100%高度的iPhone地址栏

前端之家收集整理的这篇文章主要介绍了javascript – 隐藏100%高度的iPhone地址栏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
许多帖子在这个,但不太适合我的情况.我的页面具有灵活的尺寸设置为100%宽度和100%高度,因此典型的负载滚动功能不起作用.任何想法或其他解决方案?

谢谢!

CSS:

* {
    margin:0;
    padding:0;
}
html,body {
    width:100%;
    height:100%;
    min-width:960px;
    overflow:hidden;
}

使用Javascript:

/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function () {
  window.scrollTo(0,1);
    },1000);​

解决方法

来自Nate Smith的这个解决方案帮助我: How to Hide the Address Bar in a Full Screen Iphone or Android Web App.

这里是必不可少的:

var page   = document.getElementById('page'),ua     = navigator.userAgent,iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod');

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';
  }
  // Scroll after a timeout,since iOS will scroll to the top of the page
  // after it fires the onload event
  setTimeout(scrollTo,1);
};

有关更多详情,请查看他的blog postGist.

猜你在找的JavaScript相关文章