Wie blende ich die Adressleiste eines mobilen Browsers aus?

Safari und Chrome auf Mobilgeräten enthalten beide eine sichtbare Adressleiste, wenn eine Seite geladen wird. Als body der Seite scrollt, scrollt dieser Browser die Adressleiste außerhalb des Bildschirms auf die Website, um mehr Immobilien zu geben, wie in diesem Bild gezeigt:Wie blende ich die Adressleiste eines mobilen Browsers aus?

ich in ein bisschen ein Problem laufe mit meiner Website, die dies erlaubt. Ich arbeite an einem Pokedex, der eine sehr lange Liste aller Pokémon enthält. Mit der Art, wie ich die Seite eingerichtet habe, möchte ich die Adressleiste jedoch nicht außer Sichtweite bewegen.

Meine html wie folgt aussieht:

<body> 
    <app> <!-- My Angular2 tag for the app, no special styles for this --> 
    <nav>...</nav> <!-- The red nav bar and hamburger menu, default bootstrap --> 
    <div class="fluid-container">...</div> <!-- The container for all pokemon entries --> 
    </app> 
</body>

Wenn ich auf das absolute Ende der Liste blättern (das sind 721 Einträge), dann mehr Scrollen wird die Adressleiste aus der Spitze des Umzugs Bildschirm. Wenn ich die Navigationsleiste berühre und sie nach oben ziehe, bewegt sich die Adressleiste vom Bildschirm weg. Beides scheint eine nicht intuitive Möglichkeit zu sein, dies zu tun.

Ich stelle mir vor es gibt eine Möglichkeit, wie ich den Körper der Seite mit Javascript scrollen, die es verstecken wird, aber what I've tried so far funktioniert nicht. Als ich das tat, gab es kein sichtbares Scrollen.

Wie kann ich die Seite scrollen, um die Adressleiste eines mobilen Browsers kurz nach dem Laden der Seite auszublenden?

EDIT: Je mehr ich in das, desto mehr scheint es unmöglich, es ohne Benutzerinteraktion zu tun. Wenn ich eine Benutzerinteraktion benötige, wäre es möglich, dass eine Berührung eines Benutzers in der Mitte des Bildschirms zuerst versucht, durch den Körper zu scrollen, bevor versucht wird, das div mit allen Einträgen darin zu scrollen? Wenn dies so funktioniert, wie ich es mir vorstelle, würde es zuerst die Adressleiste aus dem Weg schieben, bevor es durch die Liste gleitet. Es ist eine Art umgekehrtes Verhalten des Standard-Browsers, daher ist es möglicherweise nicht möglich/einfach/zuverlässig, aber ich bin bereit zu versuchen, um zu sehen, ob jemand irgendwelche Ideen hat.

Quelle

2016-05-23 Corey Ogburn

ist Sie können versuchen, 'window.onload = function() {setTimeout (function() { \t \t window.scrollTo (0, 1); \t}, 0); } 'aber für die neuesten Browser, werde ich vorschlagen, Vollbild api ' – Rayon

Siehe http://www.html5rocks.com/en/mobile/fullscreen/ – Rayon

Dies sollte der Code, den Sie auf die Adressleiste zu verstecken brauchen:

window.addEventListener("load",function() { 
    setTimeout(function(){ 
     // This hides the address bar: 
     window.scrollTo(0, 1); 
    }, 0); 
});

auch gut aussehende Pokedex durch die Art und Weise! Hoffe das hilft!

Quelle

2016-05-23 16:12:48 NiallMitch14

Dies funktionierte nicht für mich auf meinem Nexus 6 mit dem neuesten Android N. Ich habe kein iPhone zum Testen. Dies kann daran liegen, dass ich Angular2 verwende. Das Fenster kann das Ladeereignis auslösen, bevor alle AJAX-Anfragen die pokemon-Daten zurückbekommen. Wenn dies passiert, ist die Dokumentenhöhe möglicherweise nicht ausgefüllt. Ich habe versucht, dies nach diesen AJAX-Anfragen aufzurufen und es hat immer noch nicht funktioniert. –

funktioniert nicht auf Iphone 6 –

Funktioniert nicht auf iOS 10. –

Werfen Sie einen Blick auf diese HTML5 Post rockt - http://www.html5rocks.com/en/mobile/fullscreen/ im Grunde Sie JS verwenden oder die Vollbild-API (bessere Option IMO) oder einige Metadaten an den Kopf hinzufügen, um anzuzeigen, dass die Seite eine Webapp

Quelle

2016-05-23 16:16:36

Ich habe die Meta-Tags hinzugefügt und jetzt sieht die App/funktioniert gut, wenn ich die Website auf meinem Desktop speichern, aber ich kann die Vollbild-API nicht zum Laden laden.Es erfordert wahrscheinlich Benutzerinteraktion, um dies zu tun. –

Ja, auf meinem PC bekomme ich das in der Konsole: 'Fehler beim Ausführen von 'requestFullScreen' auf 'Element': API kann nur durch eine Benutzergeste ausgelöst werden.' –

Wie blende ich die Adressleiste eines mobilen Browsers aus?

Antwort

Verwandte Themen