在移动网络应用程序中删除地址栏的跨平台方法 [英] Cross-platform method for removing the address bar in a mobile web app
问题描述
我正在开发一个移动网络应用程序并试图删除地址栏.它很容易，除非 的自然高度不够高以允许滚动.尽我所能，我找不到可靠的 iphone/android 跨设备方法来确保 足够高以允许地址栏消失.我见过的许多方法都依赖于 screen.height 这使得页面比它需要的要高.它应该完全高到可以让地址栏消失并且不能更高！
I am working on a mobile web app and am trying to remove the address bar. Its easy enough, unless the <body>'s natural height is not tall enough to allow for scrolling. Try as I might I cannot find a reliable iphone/android, cross device method of insuring that the <body> is tall enough to allow the address bar to disappear. Many of the methods I've seen rely on screen.height which makes the page TALLER than it needs to be. It should be EXACTLY tall enough to allow the address bar to go away and no taller!
有没有人有完美处理这个的脚本?我只需要确定页面的高度减去 iphone 和 android 的地址栏.
Does anyone have a script that handles this perfectly? I all I need to to determine the height of the page minus the address bar for iphone and android.
我试过了:
screen.height //too tall
window.innerHeight //too short
document.documentElement.clientHeight //too short
document.body.clientHeight //almost but too short
允许使用 JQUERY.
JQUERY allowed.
推荐答案
这个网站 还有一些其他的建议，但是这个严肃、不用担心的建议可以在 github:gist 并回答您的问题(为方便起见粘贴在此处):
This site also has a few other suggestions, but this no-nonsense, no-worry one is available in a github:gist and answers your question (pasted here for convenience):
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 );
据我所知，添加到页面的额外高度(这给您带来了问题)和 scrollTo() 语句的组合使地址栏消失了.
As far as I can tell, the combination of extra height added to the page (which caused problems for you) and the scrollTo() statement make the address bar disappear.
在同一站点，隐藏地址栏的最简单"解决方案是使用 scrollTo() 方法:
From the same site the 'simplest' solution to hiding the address bar is using the scrollTo() method:
window.addEventListener("load", function() { window.scrollTo(0, 1); });
这将隐藏地址栏，直到用户滚动.
This will hide the address bar until the user scrolls.
本站将同样的方法放在超时函数中(理由不解释，但它声称没有它代码就无法正常工作):
This site places the same method inside a timeout function (the justification is not explained, but it claims the code doesn't work well without it):
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
这篇关于在移动网络应用程序中删除地址栏的跨平台方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
