有人知道我如何在Android浏览器中移除地址栏以更好地查看我的Web应用程序,并使其看起来更像原生应用程序吗?
有人知道我如何在Android浏览器中移除地址栏以更好地查看我的Web应用程序,并使其看起来更像原生应用程序吗?
您可以使用以下代码实现此功能
if(navigator.userAgent.match(/Android/i)){
window.scrollTo(0,1);
}
希望这能对你有所帮助!
这是一种非jQuery解决方案,可以立即移除地址栏而无需滚动,并且在旋转浏览器方向时也适用。
function hideAddressBar(){
if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
setTimeout(window.scrollTo(1,1),0);
}
window.addEventListener("load",function(){hideAddressBar();});
window.addEventListener("orientationchange",function(){hideAddressBar();});
这应该也适用于iPhone,但我无法进行测试。
window.outerHeight/window.devicePixelRatio
这个可以用!非常感谢。 - kio21如果您已经加载了jQuery,您可以查看内容的高度是否大于视口的高度。如果不是,则可以将其设置为该高度(或稍微小一些)。我在Android模拟器中以WVGA800模式运行了以下代码,然后在我的三星Galaxy Tab上运行它,在两种情况下都隐藏了地址栏。
$(document).ready(function() {
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0,0); // reset in case prev not scrolled
var nPageH = $(document).height();
var nViewH = window.outerHeight;
if (nViewH > nPageH) {
nViewH -= 250;
$('BODY').css('height',nViewH + 'px');
}
window.scrollTo(0,1);
}
});
参考Volomike的答案,我建议替换该行
。nViewH -= 250;
使用
nViewH = nViewH / window.devicePixelRatio;
我在HTC Magic(PixelRatio = 1)和三星Galaxy Tab 7"(PixelRatio = 1.5)上测试过,效果完全一样。
//WHENEVER the user scrolls
$(window).scroll(function(){
//if you reach the top
if ($(window).scrollTop() == 0)
//scroll back down
{window.scrollTo(1,1)}
})
<body onload="document.body.style.height=(2*window.innerHeight-window.outerHeight)+'px';"></body>
setInterval(function(){window.scrollTo(1,0)},50);
以下方法每次都适用于我...
这个网站还有其他一些建议,但这个简单明了、无需担心的方法可以在 github:gist 上找到,并回答了你的问题(为方便起见,在此粘贴):
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() { window.scrollTo(0, 1); });
这将隐藏地址栏,直到用户滚动。
该网站在超时函数中放置了相同的方法(没有解释理由,但声称代码没有它运行得好):
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
我希望它也有用
window.addEventListener("load", function()
{
if(!window.pageYOffset)
{
hideAddressBar();
}
window.addEventListener("orientationchange", hideAddressBar);
});
var page_size_check = null, q_body;
(q_body = $('#body')).bind('DOMSubtreeModified', function() {
if (page_size_check === null) {
return;
}
page_size_check = setTimeout(function() {
q_body.css('height', '');
if (q_body.height() < window.innerHeight) {
q_body.css('height', window.innerHeight + 'px');
}
if (!(window.pageYOffset > 1)) {
window.scrollTo(0, 1);
}
page_size_check = null;
}, 400);
});
已在Android和iPhone上进行测试。
page_size_check === null
并且它一开始就是null
,那么绑定到DOMSubtreeModified
的函数将不会执行。page_size_check
是如何被设置的?另外,为什么在函数末尾再次将其设置为null
? - Ted Hopp最后我尝试了这个。它对我起作用了。
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ebook);
//webview use to call own site
webview =(WebView)findViewById(R.id.webView1);
webview.setWebViewClient(new WebViewClient());
webview .getSettings().setJavaScriptEnabled(true);
webview .getSettings().setDomStorageEnabled(true);
webview.loadUrl("http://www.google.com");
}
你的整个main.xml(res/layout)应该像这样:
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
不要去添加布局。
body { min-height: calc(100vh + 1px); }
与其他内容结合。 - Daut