Suppression de la barre d'adresse du navigateur (pour afficher sur Android)

Est-ce que quelqu'un sait comment puis-je supprimer la barre d'adresse du navigateur Android pour mieux voir mon application Web et la faire ressembler davantage à une application natif?

Vous pouvez le faire avec le code suivant

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

J'espère que ça t'aide!

Voici la solution NON-jQuery qui supprime instantanément la barre d'adresse sans défilement. De plus, cela fonctionne lorsque vous faites pivoter l'orientation du navigateur.

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

Il devrait également fonctionner avec l'iPhone, mais je ne pouvais pas tester cela.

Si vous avez chargé jQuery, vous pouvez voir si la hauteur du contenu est supérieure à la hauteur de la fenêtre. Sinon, vous pouvez atteindre cette hauteur (ou un peu moins). J'ai exécuté le code suivant en mode WVGA800 dans l'émulateur Android, puis je l'ai exécuté sur mon Samsung Galaxy Tab, et dans les deux cas, il a caché la barre d'adresse.

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

En se référant à la réponse de Volomike , je propose de remplacer la ligne

 nViewH -= 250;

avec

 nViewH = nViewH / window.devicePixelRatio;

Il fonctionne exactement comme je vérifie sur un HTC Magic (PixelRatio = 1) et un Samsung Galaxy Tab 7 "(PixelRatio = 1.5).

L'un ci-dessous fonctionne pour moi à chaque fois …

Ce site a également quelques autres suggestions, mais cette solution sans souci, sans souci, est disponible dans un github: gist et répond à votre question (collé ici pour plus de commodité):

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

Pour autant que je le sache, la combinaison de hauteur supplémentaire ajoutée à la page (qui a causé des problèmes pour vous) et l'instruction scrollTo () font disparaître la barre d'adresse.

Du même site, la solution «la plus simple» pour cacher la barre d'adresse utilise la méthode scrollTo ():

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

Cela cachera la barre d'adresse jusqu'à ce que l'utilisateur se déplace.

Ce site place la même méthode dans une fonction de temporisation (la justification n'est pas expliquée, mais elle prétend que le code ne fonctionne pas bien sans)

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

Le problème avec la plupart d'entre eux est que l'utilisateur peut toujours faire défiler vers le haut et voir la barre d'adresse. Pour faire une solution permanente, vous devez également l'ajouter.

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

Cela fonctionne sur Android (au moins sur stock gingerbread browser):

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

En outre, si vous souhaitez désactiver le défilement, vous pouvez utiliser

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

Voici un exemple qui garantit que le corps a une hauteur minimale de hauteur de l'écran de l'appareil et cache également la barre de défilement. Il utilise l'événement DOMSubtreeModified, mais ne fait que vérifier tous les 400ms, pour éviter les pertes de performance.

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

Testé sur Android et iPhone.

Je l'espère aussi utile

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

Enfin, j'essaie avec ça. Cela a fonctionné pour moi …

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

Et votre look principal.xml (res / layout) devrait être le suivant:

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

N'allez pas ajouter des mises en page.

J'ai trouvé que si vous ajoutez la commande à décharger, il continue à faire défiler la page, c'est-à-dire la page qui se déplace. J'espère que ça marche avec toi aussi!

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

À l'aide d'une tablette de 7 pouces avec Android, http://www.kupsoft.com visite mon site Web et vérifie comment elle se comporte, j'utilise cette commande dans mon portail.