javascript - chrome - Eliminar la barra de direcciones del navegador(para ver en Android)

ocultar barra de direcciones chrome android

Question

¿Alguien sabe cómo puedo eliminar la barra de direcciones del navegador de Android para ver mejor mi aplicación web y hacer que se parezca más a una aplicación nativa?

Answer 1

Aquí está la solución NON-jQuery que elimina instantáneamente la barra de direcciones sin desplazarse. Además, funciona cuando gira la orientación del navegador.

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

Debería funcionar también con el iPhone, pero no pude probarlo.

Answer 2

Aquí hay un ejemplo que asegura que el cuerpo tenga una altura mínima de la altura de la pantalla del dispositivo y también oculta la barra de desplazamiento. Utiliza el evento DOMSubtreeModified, pero realiza la comprobación solo cada 400 ms, para evitar la pérdida de rendimiento.

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

Probado en Android y iPhone.

Answer 3

Descubrí que si agrega el comando para descargar, él mantiene hacia abajo la página, es decir, la página que se mueve. Espero que funcione con usted también!

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

Usando una tableta de 7 pulgadas con Android, www.kupsoft.com visite mi sitio web y compruebe cómo se comporta la página, uso este comando en mi portal.

Answer 4

El de abajo funciona para mí todo el tiempo ..

Este sitio también tiene algunas otras sugerencias, pero este sencillo y sin preocupaciones está disponible en github: gist y responde a su pregunta (pegada aquí para su comodidad):

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

Por lo que puedo decir, la combinación de la altura extra añadida a la página (que le causó problemas) y la declaración scrollTo () hacen que la barra de direcciones desaparezca.

Desde el mismo sitio, la solución ''más simple'' para ocultar la barra de direcciones es usar el método scrollTo ():

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

Esto ocultará la barra de direcciones hasta que el usuario se desplace.

Este sitio coloca el mismo método dentro de una función de tiempo de espera (la justificación no se explica, pero afirma que el código no funciona bien sin él):

// When ready...
window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
     window.scrollTo(0, 1);
  }, 0);
});

Answer 5

El problema con la mayoría de estos es que el usuario aún puede desplazarse hacia arriba y ver la barra de direcciones. Para hacer una solución permanente, debe agregar esto también.

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

Answer 6

Espero que también sea útil

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

Answer 7

Finalmente, trato con esto. Funcionó para mí ...

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

y todo su aspecto main.xml (res / layout) debería tener este aspecto:

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

no vaya a agregar diseños.

Answer 8

Puedes hacer eso con el próximo código

 if(navigator.userAgent.match(/Android/i)){
    window.scrollTo(0,1);
 }

¡Espero que te ayude!

Answer 9

Refiriéndome a la respuesta de Volomike , sugeriría reemplazar la línea

nViewH -= 250;

con

nViewH = nViewH / window.devicePixelRatio;

Funciona exactamente como lo compruebo en un HTC Magic (PixelRatio = 1) y un Samsung Galaxy Tab 7 "(PixelRatio = 1.5).

Answer 10

Si ha cargado jQuery, puede ver si el alto del contenido es mayor que el alto de la ventana gráfica. Si no es así, entonces puedes subir esa altura (o un poco menos). Ejecuté el siguiente código en el modo WVGA800 en el emulador de Android, y luego lo ejecuté en mi Samsung Galaxy Tab, y en ambos casos ocultó la barra de direcciones.

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

});

Answer 11

esto funciona en Android (al menos en el navegador stock de jengibre):

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

Además, si desea deshabilitar el desplazamiento, puede usar

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