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

Question

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

1. 试过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();
   

2. 尝试强制状态栏覆盖 webview，本质上使应用程序的高度为 480 像素（而不是 460 像素）：

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

3. 尝试将状态栏强制为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" />
   

4. 尝试将 body 的 margin-top 偏移 20px，这只是增加了额外的 20px 死空白：

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

5. 尝试将应用设置为fullscreen，这实际上对应用没有任何影响：

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

6. 我什至使用 Safari 检查器完全删除了 body DOM 节点，它仍然滚动 20px，告诉我它与 HTML 无关，与 Cordova 的 WebView 实现无关。

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

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

                });
}])