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

Question

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

1. 尝试手动隐藏状态栏,没有任何效果.

   // 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,实际上使应用程序整个480px高(而不是460px):

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

3. 试图强制状态栏不覆盖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. 试图将身体的边缘顶部偏移20px,这只会增加额外20px的死空白:

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

5. 尝试将应用程序设置为全屏,这对应用程序无论如何都没有影响:

   // 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中解决这个问题的方法,这个问题由StackOverflow的答案所涵盖.我没有看到完全删除任何缺点(对于针对iOS 6+的Cordova应用程序).