Question

我正在构建一个Cordova应用程序，我正在我的iOS 6设备（iPod Touch w / iOS 6.1.6）上进行测试。出于某种原因，WebView可以滚动额外的20px，似乎弥补了屏幕顶部的20px状态栏。这有时会导致可滚动的WebView获得焦点，实际上导致“无”在用户眼中滚动，而不是允许我的应用程序中的可滚动div滚动。我尝试了很多与config.xml更改，插件等有关的修复，但没有什么区别，我在下面概述了。

尝试manually hiding the status bar，但没有效果。

// 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();

尝试强制状态栏覆盖webview，实际上使应用程序的整数高达480px（而不是460px）：

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

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

尝试将状态栏强制为not overlay the webview：

// 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;
}
```
尝试将应用设置为fullscreen，这对应用无论如何都没有影响：
```
// config.xml:
<preference name="Fullscreen" value="true" />
```
我甚至使用Safari检查器完全删除body DOM节点，它仍然滚动20px，告诉我它与HTML无关，而与Cordova实现的WebView无关。 / p>

有人有解决方案吗？我不可能是遇到这种情况的唯一一个。

Answer 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中找到了解决这个问题的方法，this StackOverflow answer涵盖了这些方法。虽然我没有看到完全删除的任何缺点（针对iOS 6 +的Cordova应用）。

Answer 2

您是否已在设备上尝试此操作？

window.StatusBar.overlaysWebView(false);

https://github.com/apache/cordova-plugin-statusbar/blob/master/doc/index.md

Answer 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);

                });
}])

为什么我的Cordova WebView有额外的20px滚动？

3 个答案: