webentwicklung-frage-antwort-db.com.de

HTML5-Vollbild-Web-Apps: Keine Browser-Leisten

Ich erstelle eine HTML5-Web-App für mobile Geräte und wurde gebeten, die nav-Leiste des Browsers (die Vor- und Zurück-Schaltflächen) zu verbergen (Tippfehler hier). Wie kann ich das erreichen? 

Ich denke, ich sollte das mit Phone Gap erreichen können. Aber ich frage mich, ob eine "normale" Web-App die Browserleiste ausblenden kann. Ich denke, es ist möglich, wenn ich die Website/App an den Startbildschirm anhebe? 

das iPhone hat http://ajaxian.com/archives/iphone-full-screen-webapps , aber wie sieht es mit Andriod aus? 

11
Jiew Meng

Ich weiß, dass diese Frage an diesem Punkt etwas veraltet ist. Hier ist ein Update:

Auf Safari für iOS 7+ ist diese Lösung großartig:

<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Das Attribut "minimal-ui" lässt den Browser alle Schaltflächen ausblenden, während die Taskleiste intakt bleibt.

Ich habe das nicht für Android getestet.

11
Sheldonbrax

Wenn Sie JQuery in Ihrer Web-App verwenden können, würde ich vorschlagen, dass Sie sich für NiceScroll Plugin entscheiden.

Es kann für mobile und Desktop-Browser verwendet werden und blendet die Bildlaufleisten des Browsers aus. Wenn Ihr Code über die Höhe des Viewport-Browsers hinausgeht, wird eine benutzerdefinierte Bildlaufleiste erstellt, die ausgeblendet wird, wenn sie nicht verwendet wird.

Hier ist seine Demo .

Edit:
In Ihrem Update möchte ich hinzufügen, dass ich eigentlich kein nativer Entwickler von mobilen Web-Apps bin. Bei der Suche nach Ihren Problemen habe ich jedoch einige SO Fragen gefunden, die Ihnen helfen können, den Weg weiter zu gehen:

Und diese Tutorials:

7
Asif

Sie können diese Anwendung für Android verwenden: Kiosk Web/Html Browser , erstellt einen Ordner auf Ihrer SD-Karte, in dem Sie die HTML-Datei ablegen können, die im Vollbildmodus "immersive mode" angezeigt wird.

1
fabiodipa

In der neuesten Beta-Version von Chrome für Android gibt es eine solche Funktion: https://developers.google.com/chrome/mobile/docs/installtohomescreen

0
Denes Papp

EDIT

Neue Antwort 

Seit dieser Frage hat sich viel geändert. Es gibt jetzt eine gute native Unterstützung für das Scrollen, feste Position, und die Browserleiste der meisten Betriebssysteme ist damals viel kleiner. Da dies der Fall ist, würde ich raten, nicht auf scrollende Hacks zurückzugreifen, da die meisten Websites und Antworten dies empfehlen. Wenn Sie sich an die Regeln des Betriebssystems halten, verbessern Sie die Stabilität, Benutzerfreundlichkeit und zukünftige Kompatibilität Ihrer Webapp.

Alte Antwort

Es ist für das iPhone möglich, wenn jemand es als Webapp auf dem Homescreen speichert. Dies funktioniert, wenn Sie die richtigen Metatags hinzufügen.

Für den Standard-Browsermodus ist es etwas komplizierter, wenn Sie auf Hacks zurückgreifen müssen. Grundsätzlich verschwindet die Adressleiste beim Scrollen (für Iphone und meistens für Android). Sie können dies mit Javascript fälschen. Mobile Tuts hat auch einen guten Artikel dazu: http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ , dies funktioniert jedoch nur, wenn der Inhalt länger ist die Bildschirmauflösung.

0
Tosh
<script> function requestFullScreen() {

  var el = document.body;

  // Supports most browsers and their versions.
  var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen 
  || el.mozRequestFullScreen || el.msRequestFullScreen;

  if (requestMethod) {

    // Native full screen.
    requestMethod.call(el);

  } else if (typeof window.ActiveXObject !== "undefined") {

    // Older IE.
    var wscript = new ActiveXObject("WScript.Shell");

    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}


</script>
<a href="#" onClick="requestFullScreen();"> click </a>