[英]How to hide address bar in mobile web app?
我正在创建一个移动Web应用程序(非本机),并且想为我的应用程序使用完整的屏幕高度。 问题在于浏览器的地址栏占用了大量空间,仅剩下整个屏幕的4/5。
我对我的应用进行了设置,以使其永不滚动,该站点始终适合用户屏幕的高度。 我真正追求的是Facebook移动网站的功能。 向下滚动以隐藏地址栏。
对于Android设备,Iphone以及不同的移动浏览器(不同的地址栏大小),是否有通用的方法来做到这一点?
顺便说一句:我正在使用Iscroll4获得固定的页脚和页眉。
编辑:这是我最终的代码。 我添加了两个按钮,让用户选择是否使用全屏模式。 此代码与Iscroll4和Jquery结合使用。
<script type="text/javascript">
$(document).ready(function() {
var fullscreen = false;
if(fullscreen==false)
{
window.removeEventListener("orientationchange", function(){ hideAddressBar(); } );
window.addEventListener("orientationchange", function(){ showAddressBar(); } );
}
else
{
window.removeEventListener("orientationchange", function(){ showAddressBar(); } );
window.addEventListener("orientationchange", function(){ hideAddressBar(); } );
}
$('#fullscreen').click(function(){
hideAddressBar();
fullscreen = true;
});
$('#normalscreen').click(function(){
showAddressBar();
fullscreen = false;
});
});
function hideAddressBar()
{
document.body.style.height = (window.outerHeight + 20) + 'px';
window.scrollTo(0, 1);
}
function showAddressBar()
{
document.body.style.height = (window.outerHeight - 20) + 'px';
window.scrollTo(0, 0);
}
“向下滚动” JavaScript技巧应可在iPhone和Android上使用:
http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/
抱歉,不确定其他移动浏览器。 您是在谈论Blackberry,Windows Phone等或更基本的手机吗?
您可以在此处找到有关如何实现此目标的好文章, 网址为http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/
样例脚本
function hideAddressBar()
{
if(!window.location.hash)
{
if(document.height < window.outerHeight)
{
document.body.style.height = (window.outerHeight + 50) + 'px';
}
setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
}
}
window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );
我通常这样做的方式是:
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
但是,只有在页面足够长以向下滚动时,它才起作用。
尝试这个,
对于Android:
if(navigator.userAgent.match(/Android/i)){
window.scrollTo(0,1);
}
对于iPhone:
<meta name="apple-mobile-web-app-capable" content="yes" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.