关于此的很多帖子,但并不完全适合我的情况。我的页面的灵活尺寸设置为 100% 宽度和 100% 高度,因此典型的加载滚动功能不起作用。有什么想法或其他解决方案吗?
Thanks!
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 的这个解决方案帮助了我:如何在全屏 Iphone 或 Android Web 应用程序中隐藏地址栏.
这是最重要的一点:
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);
};
欲了解更多详情,请查看他的博客文章 or the Gist.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)