web应用(Android,iPhone,iPad) 隐藏地址栏(全屏)

首页前端[Html/Css] web应用(Android,iPhone,iPad) 隐藏地址栏(全屏)

发表于 2012-06-13 - 浏览：17697 评论：1 收藏 0

主要是利用window.scrollTo(0, 0);方法，控制网页往上滚动地址栏的高度，以达到隐藏地址栏的效果

要注意的几个点：这个方法要在内容加载完成后执行，换句话浏览器内容的高度要超过浏览器窗口高度（出现'滚动条'）才有效。

针对这个高度自适应的窗口（height:100%），得用特殊方式解决:

//强制让内容超过
$('#main').css("height",window.innerHeight+100);
window.scrollTo(0, 1);
//重置成新高度
$("#main").css("height",window.innerHeight);
//非常重要，用于兼容不同机型，防止浏览器窗口移动
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

另外，最后一行，用于阻止手动滚动页面