Полноэкранное веб-приложение для Android

Question

Я хочу запустить свое веб-приложение, которое я запрограммировал с помощью HTML5, в полноэкранном режиме на Android.(скрыть строку состояния и адрес / панель навигации)

для iOS вы только пишете:

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

Но это не сработало на Android.

Естьмного решений с Javascript, но все решения, которые я пробовал, не работают.

Кто-нибудь знает решение?

Answer 1

Это сработало для меня в Chrome для Android.

Добавьте это к тегу головы:

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

Затем в меню браузера Chrome перейдите к Добавить на домашнюю страницу. Этот значок теперь откроет ваш сайт в полноэкранном режиме.

Answer 2

Я использую сочетание метатега HTML для iOS и решения JavaScript.Удаляет адресную строку на устройствах iOS и Android.Она не вынимает нижнюю панель на iOS, так как она исчезнет, ​​только когда пользователь установит веб-страницу как приложение HTML5 на своем домашнем экране.

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

Я использую PHP в бэкэнде только для рендеринга JavaScript для мобильного браузера со следующим определением мобильного браузера

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

Answer 3

Я не думаю, что вы найдете глобальное решение для этого, поскольку не все используют браузер по умолчанию для Android (например, я предпочитаю дельфина).такое поведение.

Единственная причина, по которой это работает для устройств Apple, заключается в том, что Apple очень ограничена в разработке собственного браузера и все придерживаются приложения по умолчанию.

Answer 4

Этого можно добиться с помощью нового прогрессивного веб-приложения googles, добавив работника сервиса.Посмотрите здесь: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ и https://developers.google.com/web/progressive-web-apps/.

Вы можете добавить значок на домашний экран для своего веб-приложения, получить полноэкранный режим, использовать push-уведомления и т. Д.

Answer 5

Как указано Google

Начиная с Chrome M31, вы можете настроить свое веб-приложение на наличие приложения. ярлык, добавленный на домашний экран устройства, и запуск приложения в полноэкранном «режиме приложения» с помощью Chrome для Android «Добавить в домашний экран "пункт меню.

См. https://developer.chrome.com/multidevice/android/installtohomescreen

Answer 6

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

Этот тег предназначен для отображения среды без хрома после добавления сайта на главный экран iPhone.

Я бы не стал полагаться на это для работы на Android.

Чтобы прокрутить панель браузера после загрузки страницы, посмотрите ответ на этот вопрос: Удаление адресной строки из браузера (для просмотра на Android)

Answer 7

Этот код может помочь ...

public void onCreate(Bundle savedInstanceState) {
    requestWindowFeature(Window.FEATURE_NO_TITLE); --> hide the Top Android Bar.
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

Answer 8

Со стороны Android и для версий ниже соты , это должно быть сделано с помощью:

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

Если браузер Android не делает что-то подобное, когда он читаетмета-информация, я бы попробовал заглянуть в phonegap , чтобы проверить, решают ли они эту проблему.