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

У меня есть приложение jQTouch, загруженное через сервер, поэтому все, что мне нужно сделать, это отобразить веб-страницу в полноэкранном режиме в PhoneGap для поддельного приложения. К сожалению, у каждого решения, которое я пробовал в PhoneGap, есть проблема: он считает, что размер экрана выше, чем он есть. Это приводит к тому, что вкладка, прикрепленная к нижней части экрана, постоянно находится за кадром и поэтому непригодна для использования. Вы сможете воссоздать это, используя мой код ниже и перейдя к онлайн-демонстрации iTabbar. Есть мысли о том, как исправить эту проблему?

Для фона, переход на страницу приложения в iOS Safari работает нормально, а также сохранение страницы на главном экране. В обоих случаях веб-просмотр останавливается в нижней части экрана, и поэтому отображается панель вкладок. Кроме того, я использую build.phonegap.com для компиляции (я не компилирую локально)

Я пробовал два метода:

  1. загрузите плагин childBrowser и откройте страницу (панель навигации скрыта в настройках)

  2. установите следующий параметр config.xml, чтобы не допустить переключения телефонного промежутка на Safari, а затем просто загрузите ссылку (желательно, так как она чище. Я вставил свои index.html и config.xml ниже)

Подробная информация о параметре config.xml:

Открыть все ссылки в WebView

оставайтесь в веб-просмотре со значениями true или false

  • пример: <preference name="stay-in-webview" value="true" />

  • если установлено значение true, все ссылки (даже с целевым значением пустым) будут открываться в веб-просмотре приложения

  • используйте эту настройку только в том случае, если вы хотите, чтобы страницы с вашего сервера захватили все ваше приложение

  • по умолчанию ложь

(Источник: https://build.phonegap.com/docs/config-xml).

мой index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-type" content="text/html;charset=utf-8">

<title>MyApp</title>

<script src="phonegap.js"></script>

</head>
<body>
<p><a href="http://www.itabbar.com/itabbar/demo.html#home">Launch iTabbar</a></p>
</body>
</html>

мой config.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
    xmlns:gap = "http://phonegap.com/ns/1.0"
    id        = "com.phonegap.myapp"
    versionCode="10" 
    version   = "1.0.0">

<!-- versionCode is optional and Android only -->

<name>MyApp</name>

<description>
    My app is...
</description>

<author href="https://myurl.com" email="me@myurl.com">
    me
</author>

<preference name="stay-in-webview" value="true" />

</widget>
Источник

1 ответ

Решение

Спасибо поддержке PhoneGap за то, что указал мне правильное направление. Проблема была в fullscreen.js:

window.navigator.standalone это двоичный параметр только для чтения, который fullscreen.js использует, чтобы определить, было ли веб-приложение запущено с домашнего экрана или в браузере. Если значение равно false (т. Е. В веб-браузере), добавляется 60 пикселей для адресной строки. Если это правда (т.е. запускается с домашнего экрана), к высоте не добавляются пиксели.

Итак, когда я запускал из-за пробела в телефоне, window.navigator.standalone был ложным, хотя это должно было быть правдой. Это привело к неправильному добавлению 60px. Пока я просто жестко запрограммировал это true,

Источник
Другие вопросы по тегам