从浏览器中删除地址栏(在Android上查看)

时间:2010-11-01 11:43:56

标签: javascript android mobile

有谁知道如何从Android浏览器中删除地址栏以更好地查看我的网络应用并使其看起来更像本机应用?

11 个答案:

答案 0 :(得分:45)

你可以使用下一个代码

来做到这一点
 if(navigator.userAgent.match(/Android/i)){
    window.scrollTo(0,1);
 }

我希望它可以帮到你!

答案 1 :(得分:32)

这是NON-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,但我无法测试。

答案 2 :(得分:14)

如果您已加载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);
  }

});

答案 3 :(得分:10)

参考Volomike's answer,我建议更换一行

nViewH -= 250;

nViewH = nViewH / window.devicePixelRatio;

它与我检查HTC Magic(PixelRatio = 1)和Samsung Galaxy Tab 7“(PixelRatio = 1.5)完全相同。

答案 4 :(得分:1)

下面的那个每次都适合我。

这个网站还有一些其他建议,但这个严肃,无忧无虑的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 );

据我所知,添加到页面的额外高度(导致问题)和scrollTo()语句的组合使地址栏消失。

在同一网站上,隐藏地址栏的“最简单”解决方案是使用scrollTo()方法:

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);
});

答案 5 :(得分:1)

其中大部分问题是用户仍然可以向上滚动并查看地址栏。 要制作永久解决方案,您还需要添加此解决方案。

//WHENEVER the user scrolls
$(window).scroll(function(){
    //if you reach the top
    if ($(window).scrollTop() == 0)   
    //scroll back down  
    {window.scrollTo(1,1)}
})

答案 6 :(得分:1)

这适用于android(至少在姜饼浏览器上):

<body onload="document.body.style.height=(2*window.innerHeight-window.outerHeight)+'px';"></body>

如果你想禁用滚动,你可以使用

setInterval(function(){window.scrollTo(1,0)},50);

答案 7 :(得分:0)

这是一个示例,确保正文具有设备屏幕高度的最小高度,并且还隐藏滚动条。它使用DOMSubtreeModified事件,但每隔400ms只进行一次检查,以避免性能损失。

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上测试过。

答案 8 :(得分:0)

我希望它也很有用

window.addEventListener("load", function() 
{
    if(!window.pageYOffset)
    { 
        hideAddressBar(); 
    }
    window.addEventListener("orientationchange", hideAddressBar);
});

答案 9 :(得分:-1)

最后我试试这个。它为我工作..

  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"
/>

不要去添加布局。

答案 10 :(得分:-2)

我发现如果你添加命令卸载,他会保持页面,即移动的页面! 希望它也适合你!

window.addEventListener("load", function() { window.scrollTo(0, 1); });
window.addEventListener("unload", function() { window.scrollTo(0, 1); });

使用带有android的7英寸平板电脑,www.kupsoft.com访问我的网站并检查它的行为方式页面,我在我的门户网站中使用此命令。

相关问题