许多帖子在这个,但不太适合我的情况.我的页面具有灵活的尺寸设置为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 post或Gist.