it-swarm.com.de

Adressleiste aus dem Browser entfernen (zur Anzeige auf Android)

Weiß jemand, wie ich die Adressleiste aus dem Android-Browser entfernen kann, um meine Web-App besser anzuzeigen und sie wie eine native App aussehen zu lassen?

46
SixtySticks

Sie können das mit dem nächsten Code tun

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

Ich hoffe es hilft dir!

45
Carlos

Hier ist die NON-jQuery-Lösung, die die Adressleiste sofort ohne Scrollen entfernt. Es funktioniert auch, wenn Sie die Orientierung des Browsers drehen.

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

Es sollte auch mit dem iPhone funktionieren, aber ich konnte das nicht testen.

32
Tim Eckel

Wenn Sie jQuery geladen haben, können Sie sehen, ob die Höhe des Inhalts größer als die Höhe des Viewports ist. Wenn nicht, können Sie es auf diese Höhe bringen (oder etwas weniger). Ich habe den folgenden Code im WVGA800-Modus im Android-Emulator ausgeführt und dann auf meinem Samsung Galaxy Tab und in beiden Fällen die Adressleiste versteckt.

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

});
14
Volomike

In Bezug auf Volomikes Antwort würde ich vorschlagen, die Zeile zu ersetzen 

nViewH -= 250;

mit 

nViewH = nViewH / window.devicePixelRatio;

Es funktioniert genau so, wie ich auf einem HTC Magic (PixelRatio = 1) und einem Samsung Galaxy Tab 7 "(PixelRatio = 1.5) nachprüfe.

10
Rafael Perelló

dies funktioniert auf Android (zumindest auf Lager Gingerbread Browser):

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

wenn Sie das Scrollen deaktivieren möchten, können Sie 

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

Das Problem bei den meisten davon ist, dass der Benutzer nach oben blättern und die Adressleiste sehen kann .. Um eine dauerhafte Lösung zu erhalten, müssen Sie diese ebenfalls hinzufügen.

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

Der folgende funktioniert für mich jedes Mal ..

Diese Seite hat auch ein paar andere Vorschläge, aber diese No-Nonsense, No-Sorge ist in einem Github verfügbar: Gist und beantwortet Ihre Frage (hier aus praktischen Gründen eingefügt):

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

Soweit ich das beurteilen kann, wird die Adressleiste durch die Kombination aus zusätzlicher Höhe, die der Seite hinzugefügt wurde (was für Sie Probleme verursacht hat) und der Anweisung scrollTo ().

Die einfachste Lösung zum Ausblenden der Adressleiste von derselben Site ist die scrollTo () -Methode:

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

Dadurch wird die Adressleiste ausgeblendet, bis der Benutzer einen Bildlauf durchführt.

Diese Site fügt dieselbe Methode in eine Timeout-Funktion ein (die Begründung wird nicht erklärt, behauptet jedoch, dass der Code ohne sie nicht gut funktioniert):

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

Ich hoffe es auch nützlich

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

Hier ein Beispiel, das sicherstellt, dass der Körper eine minimale Höhe der Bildschirmhöhe des Geräts hat, und auch die Bildlaufleiste verbirgt. Es verwendet das DOMSubtreeModified-Ereignis, prüft jedoch nur alle 400 ms, um einen Leistungsverlust zu vermeiden.

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

Getestet auf Android und iPhone.

0
JussiR