Vollbild-Web-App für Android

Lesezeit: 4 Minuten

Ich möchte meine Web App, die ich mit HTML5 programmiert habe, im Vollbildmodus auf Android ausführen. (Statusleiste und Adress-/Navigationsleiste ausblenden)

für iOS schreibt man nur:

<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Aber das hat auf Android nicht funktioniert.

Es gibt viele Lösungen mit Javascript, aber alle Lösungen, die ich ausprobiert habe, funktionieren nicht.

Kennt jemand die Lösung?

Dies funktionierte für mich auf Chrome für Android.

Fügen Sie dies den Head-Tags hinzu:

<meta name="mobile-web-app-capable" content="yes">

Gehen Sie dann im Menü des Chrome-Browsers zu Zur Startseite hinzufügen. Dieses Symbol öffnet nun Ihre Website im Vollbildmodus.

  • Es ist eine schöne Lösung. Auf diese Weise hat der Benutzer eine anwendungsähnliche Umgebung. Aber es wäre besser, wenn es eine Google Play-Möglichkeit gäbe, dies zu tun.

    – Tonne

    2. Juni 2015 um 22:48 Uhr

  • Die Benachrichtigungsleiste ist da, aber die Adressleiste ist damit verschwunden

    – Iftikar Urrhman Khan

    10. Juni 2016 um 12:46 Uhr

  • Perfekt für das, was ich ohne Hacky-Hacks tun musste!

    – Dekan Meehan

    17. April 2017 um 19:24 Uhr

Ich verwende eine Mischung aus dem HTML-Meta-Tag für iOS und einer JavaScript-Lösung. Es entfernt die Adressleiste auf iOS- und Android-Geräten. Die untere Leiste auf iOS wird nicht entfernt, da diese erst verschwindet, wenn der Benutzer die Webseite als HTML5-App auf seinem Startbildschirm installiert.

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<script type="text/javascript" charset="utf-8">
    // Hides mobile browser's address bar when page is done loading.
      window.addEventListener('load', function(e) {
        setTimeout(function() { window.scrollTo(0, 1); }, 1);
      }, false);
</script>

Ich verwende PHP im Backend, um das JavaScript nur für mobile Browser mit der folgenden mobilen Browsererkennung zu rendern

if (preg_match('/iphone|ipod|android/',strtolower($_SERVER['HTTP_USER_AGENT'])))

  • Funktioniert das für Android Tablets? Ich habe es mit dem Code versucht, aber er funktioniert bei mir nicht. Ich verwende den Chrome-Browser auf dem Gerät Samsung Tablet Android Version 4.0.4.

    – sureshunivers

    22. Januar 2013 um 8:52 Uhr

  • @ton Wenn Sie eine Lösung finden, wäre es großartig, wenn Sie die Antwort aktualisieren. Vielen Dank

    – Philipp

    3. Juni 2015 um 18:39 Uhr

  • noch nie gesehen. Ich habe dies 2012 gepostet, als ich dieses Problem hatte.

    – Philipp

    4. Juni 2015 um 0:23 Uhr

Benutzer-Avatar
Knickedi

Ich glaube nicht, dass Sie dafür eine globale Lösung finden werden, da nicht jeder den Standard-Android-Webbrowser verwendet (zB bevorzuge ich Dolphin).

Angesichts dieser Tatsache müssen Sie jeden schmutzigen Javascript-Hack ausprobieren, um dieses Verhalten zu erzwingen.

Der einzige Grund, warum dies für Apple-Geräte funktioniert, ist die Tatsache, dass Apple bei der Entwicklung eines benutzerdefinierten Browsers sehr restriktiv ist und sich alle an die Standard-App halten.

  • okey … Aber für den Standard-Android-Webbrowser? Wie funktioniert es dafür?

    – Benutzer959456

    22. September 2011 um 15:46 Uhr

  • Ehrlich gesagt habe ich das nie ausprobiert und müsste das recherchieren. Ich habe etwas gesehen wie “Lass die Seite ein Pixel scrollen, dann verschwindet sie”

    – Knickedi

    22. September 2011 um 15:47 Uhr


  • Sehen Sie sich meine Lösung an, funktioniert für mich in verschiedenen Browsern in Android und iOS hervorragend

    – Philipp

    27. Juni 2012 um 7:40 Uhr

Sie können dies mit der neuen progressiven Web-App von Google erreichen, die den Service Worker hinzufügt. Schau mal hier: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ und https://developers.google.com/web/progressive-web-apps/ .

Sie können ein Symbol auf dem Startbildschirm für Ihre Webapp hinzufügen, den Vollbildmodus abrufen, Push-Benachrichtigungen verwenden usw.

Benutzer-Avatar
m6tt

<meta name="apple-mobile-web-app-capable" content="yes" /> 

Dieses Tag soll eine chromlose Umgebung anzeigen, nachdem Sie Ihre Website zum Startbildschirm des iPhones hinzugefügt haben.

Ich würde mich nicht darauf verlassen, dass dies für Android funktioniert.

Um die Browserleiste nach dem Laden Ihrer Seite zur Seite scrollen zu lassen, lesen Sie die Antwort auf diese Frage: Entfernen der Adressleiste aus dem Browser (zur Anzeige auf Android)

  • Dies funktioniert perfekt in Android, aber ich würde vorschlagen, ein Manifest zu verwenden (es bietet mehr Anpassungsoptionen). updates.html5rocks.com/2014/11/…

    – Luis Sieira

    19. September 2015 um 21:34 Uhr

Benutzer-Avatar
Alex Nolasco

Wie von Google angegeben

Seit Chrome M31 können Sie Ihre Web-App so einrichten, dass ein Anwendungsverknüpfungssymbol zum Startbildschirm eines Geräts hinzugefügt wird und die App im Vollbild-App-Modus gestartet wird, indem Sie den Menüpunkt „Zum Startbildschirm hinzufügen“ von Chrome für Android verwenden.

Sehen https://developer.chrome.com/multidevice/android/installtohomescreen

  • Dies funktioniert perfekt in Android, aber ich würde vorschlagen, ein Manifest zu verwenden (es bietet mehr Anpassungsoptionen). updates.html5rocks.com/2014/11/…

    – Luis Sieira

    19. September 2015 um 21:34 Uhr

Benutzer-Avatar
Macarse

Von der Android-Seite und für niedrigere Versionen als Honeycombsollte dies geschehen mit:

Window w = getWindow();
w.addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
w.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

Wenn der Android-Browser beim Lesen der Metainformationen so etwas nicht tut, würde ich versuchen, nachzusehen Telefonlücke um zu überprüfen, ob sie dieses Problem lösen.

  • Es ist eine WEB-App (HTML5), keine native App

    – Benutzer959456

    22. September 2011 um 15:47 Uhr

  • @ user959456: Bitte lesen Sie meine vollständige Antwort. Diese Zeilen sind das, was der Browser tun sollte, wenn die Metadaten gelesen werden. Wenn der Standardbrowser dies nicht tut, empfehle ich Ihnen zu überprüfen, ob phonegap dies gelöst hat.

    – Makarse

    22. September 2011 um 16:22 Uhr

1228570cookie-checkVollbild-Web-App für Android

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy