Pełnoekranowa aplikacja internetowa dla Androida

Chcę uruchomić moją aplikację internetową, którą zaprogramowałem za pomocą HTML5, w trybie pełnoekranowym na Androidzie. (ukryj pasek stanu i pasek adresu/nawigacji)

Dla iOS piszesz tylko: 

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

Ale to nie działa na Androidzie.

Istnieje wiele rozwiązań z Javascript, ale wszystkie rozwiązania, które wypróbowałem, są niedziałające.

Ktoś zna rozwiązanie?
Author: user959456, 2011-09-22
Source

8 answers

Nie sądzę, że znajdziesz na to globalne rozwiązanie, ponieważ nie każdy używa domyślnej przeglądarki android webbrowser (np. wolę dolphin).

W obliczu tego faktu będziesz musiał spróbować każdego brudnego hack javascript, aby wymusić to zachowanie.

Jedynym powodem, dla którego działa to na urządzeniach apple, jest fakt, że apple jest bardzo restrykcyjne w kwestii tworzenia niestandardowej przeglądarki i wszyscy trzymają się domyślnej aplikacji.

 3
Author: Knickedi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-26 07:18:55

To działało dla mnie na Chrome dla Androida.

Dodaj to do tagów head: 

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

Następnie w menu przeglądarki chrome, Goto dodać do strony głównej. Ta ikona otworzy teraz Twoją witrynę na pełnym ekranie.

 22
Author: jason,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-20 07:24:27

Używam kombinacji znacznika meta HTML dla iOS i rozwiązania JavaScript. Usuwa pasek adresu na urządzeniach z systemem iOS i android. Nie wyjmuje dolnego paska na iOS, ponieważ zniknie on tylko wtedy, gdy użytkownik zainstaluje stronę internetową jako aplikację HTML5 na swoim ekranie głównym. 

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

Używam PHP w backendzie tylko do renderowania JavaScript dla przeglądarki mobilnej z następującym wykrywaniem przeglądarki mobilnej 

if (preg_match('/iphone|ipod|android/',strtolower($_SERVER['HTTP_USER_AGENT'])))
 9
Author: philipp,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-27 07:39:50

Można to osiągnąć z googles Nowa progresywna aplikacja internetowa dodając pracownika serwisu. Zajrzyj tutaj: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ i https://developers.google.com/web/progressive-web-apps /.

Można dodać ikonę na ekranie głównym dla webapp, uzyskać pełny ekran, można użyć powiadomienia push itp.

 2
Author: crystalthinker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-23 09:43:22 
<meta name="apple-mobile-web-app-capable" content="yes" />

Ten znacznik ma na celu wyświetlanie środowiska bez chromu po dodaniu witryny do ekranu głównego iPhone ' a.

Nie liczyłbym na to, żeby działało na Androida.

Aby pasek przeglądarki przewijał się po załadowaniu strony, zobacz odpowiedź na to pytanie: Usuwanie paska adresu z przeglądarki (aby wyświetlić na Androidzie)

 1
Author: m6tt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:03:06

Jak wskazuje Google

Od Chrome M31 możesz skonfigurować swoją aplikację internetową tak, aby miała aplikację ikona skrótu dodana do ekranu głównego urządzenia i uruchomienie aplikacji w trybie pełnoekranowym "App mode" za pomocą Chrome dla Androida " Dodaj do ekran główny " pozycja menu.

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

 1
Author: Alex Nolasco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-03 21:40:27

Ten kod może pomóc...

public void onCreate(Bundle savedInstanceState) {
    requestWindowFeature(Window.FEATURE_NO_TITLE); --> hide the Top Android Bar.
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
 -8
Author: user1251064,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-26 04:53:35

Od strony Androida i dla wersji niższych niż honeycomb należy to zrobić używając: 

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

Jeśli przeglądarka Android nie robi czegoś takiego, gdy czyta meta info, spróbowałbym zajrzeć do phonegap , aby sprawdzić, czy rozwiązują ten problem.

 -9
Author: Macarse,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-22 15:44:35