隐藏100％身高的iPhone地址栏

Question

很多帖子都是这样的，但并不完全适合我的情况。我的页面的灵活尺寸设置为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);​ 

Answer 1

我这个挣扎过。最初我尝试了一个CSS类（.stretch），它定义了200％的可见高度和溢出，然后在scrollTo之前和之后通过脚本在HTML上进行切换。这是行不通的，因为计算的100％高度指的是可用的视口尺寸减去所有浏览器镶边（将状态栏重新放回原位）。

最终，我不得不请求特定的样式通过DOM API动态应用。要添加到您的额外片段：

var CSS = document.documentElement.style; 

/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function() { 
    CSS.height = '200%'; 
    CSS.overflow = 'visible'; 

    window.scrollTo(0, 1); 

    CSS.height = window.innerHeight + 'px'; 
    CSS.overflow = 'hidden'; 
}, 1000);​ 

不过，我会建议延长斯科特Jehl的方法，其中涉及未成年人的Android/iOS的Safari浏览器scrollTo差异：

https://gist.github.com/1183357

Answer 2

这从内特 - 史密斯解决方案帮助我：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, 0, 0, 1); 
}; 

有关详细信息，请查看他的blog post或Gist。