Почему у моей Cordova WebView есть дополнительные 20px прокрутки?

Я создаю приложение Cordova, и я тестирую его на своем устройстве iOS 6 (iPod Touch w/iOS 6.1.6). По какой-то причине WebView прокручивается с дополнительным 20px, по-видимому, составляя строку состояния 20px в верхней части экрана. Это иногда заставляет прокручиваемый WebView фокусироваться, по сути, заставляя "ничего" прокручивать в глазах пользователя, вместо того, чтобы прокручивать прокручиваемое div в моем приложении. Я пробовал множество исправлений, связанных с изменениями config.xml, плагинами и т.д., Но ничего не меняет, о чем я говорил ниже.

  • Попробовал вручную скрывать строку состояния без эффекта.

    // config.xml:
<plugin name="org.apache.cordova.statusbar" version="0.1.7" />

<feature name="StatusBar">
  <param name="ios-package" value="CDVStatusBar" />
</feature>

// index.js (ondeviceready):
window.StatusBar && window.StatusBar.hide();

  • Пробовал форматирование строки состояния для наложения веб-представления, по существу делая приложение полным 480px высоким (вместо 460px):

    // config.xml:
<plugin name="org.apache.cordova.statusbar" version="0.1.7" />

<preference name="StatusBarOverlaysWebView" value="true" />

  • Пробовал форматировать строку состояния не накладывать веб-просмотр:

    // config.xml:
<plugin name="org.apache.cordova.statusbar" version="0.1.7" />

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />

  • Пробовал компенсировать край поля на 20px, что добавляет лишние 20px мертвых пробелов:

    // index.css:
body {
  margin-top: 20px;
}

  • Попробовал настроить приложение на полноэкранный режим, который буквально не влияет на приложение:

    // config.xml:
<preference name="Fullscreen" value="true" />

  • Я даже использовал инспектор Safari для удаления body DOM node вообще, и он по-прежнему прокручивает 20px, сообщая мне, что он не имеет ничего общего с HTML так же, как реализация кода в Web-среде Кордовы.

У кого-нибудь есть решение для этого? Я не могу быть единственным, кто сталкивался с этим.

Ответы

Ответ 1

Выяснил это после почти 8 часов возиться. Чтобы заменить параметр просмотра meta:

<meta name="viewport" content="user-scalable=no, initial-scale=1,
        maximum-scale=1, minimum-scale=1, width=device-width,
        height=device-height, target-densitydpi=device-dpi" />

:

<meta name="viewport" content="user-scalable=no, initial-scale=1,
        maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />

Кажется, что height=device-height учитывал полную высоту устройства, включая строку состояния. Я видел способ обойти это в JavaScript для тех, кого это интересует, на которые распространяется fooobar.com/questions/21655/.... Я не вижу недостатка в удалении вообще (для приложения Кордовы, ориентированного на iOS 6 +).

Ответ 3

Ionic + AngularJs

.run(['$rootScope', '$state', function ($rootScope, $state) {
            //set status bar 
            $cordovaStatusbar.styleHex('#637386');
            $cordovaStatusbar.overlaysWebView(true);

            $rootScope.$on('$stateChangeStart',
                function(event, toState, toParams, fromState, fromParams) {
                    //for me was helpful this call
                    $cordovaStatusbar.overlaysWebView(true);

                });
}])