Как сделать так, чтобы веб-приложение React занимало весь экран мобильного браузера или учетную запись для панели навигации мобильного браузера? - PullRequest
0 голосов
/ 12 июля 2020

У меня есть веб-приложение, которое я хотел бы использовать в полноэкранном режиме. В моем приложении React я использую 100vh, но когда я смотрю на производственное приложение на своем телефоне, есть дополнительная область, которую можно прокрутить вниз, что, по-видимому, вызвано дополнительной панелью навигации в верхней части экран из веб-браузера.

В идеале, я бы хотел, чтобы веб-приложение отображало весь экран, поэтому я посмотрел здесь . Я пытался использовать document.documentElement.requestFullscreen();, но когда я добавил его в свое приложение React в компонент, который я хотел сделать в полноэкранном режиме, я получил эту ошибку: Uncaught (in promise) TypeError: fullscreen error. Я не мог найти так много других материалов на этой странице, кроме страницы w3school, но, похоже, у нее было аналогичное решение. Поэтому вместо этого я попробовал другое решение на этой странице, которое добавляло эти два метатега в мой index.html файл:

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

Я думаю, что они должны разрешить добавление веб-приложения в мобильная домашняя страница пользователя, доступ к которой осуществляется как приложение. Когда я добавляю его на свою домашнюю страницу, я открываю приложение, оно показывает мне мой значок и имя, которое у меня есть в моем manifest.json файле, но затем он превращается в белый экран.

Если я могу ' Чтобы разобраться в этом полноэкранном режиме, есть ли способ узнать высоту панели навигации в коде?

...