为什么我的Cordova WebView有额外的20px的滚动？ [英] Why does my Cordova WebView have an extra 20px of scrolling?

问题描述

我正在建立一个Cordova应用程式，我将在iOS 6装置（iPod Touch w / iOS 6.1.6）上测试。由于某种原因，WebView可以滚动一个额外的20px，看起来弥补20px状态栏在屏幕的顶部。这有时会导致可滚动的WebView焦点，基本上导致没有滚动在用户的眼睛，而不是允许滚动 div 在我的应用程序滚动。我已经尝试了很多关于config.xml更改，插件等的修复，但没有什么有什么区别，我在下面列出。

1. 尝试手动隐藏状态栏，其中没有效果。

     // config.xml：
   < plugin name =org.apache.cordova.statusbar version =0.1.7/> 
    
   < feature name =StatusBar> 
   < param name =ios-packagevalue =CDVStatusBar/> 
   < / feature> 
    
    // index.js（ondeviceready）：
    window.StatusBar&& window.StatusBar.hide（）; 
     




2. 试图强制状态栏覆盖网页视图， （而不是460px）：

     // config.xml：
   < plugin name =org.apache。 cordova.statusbarversion =0.1.7/> 
    
   < preference name =StatusBarOverlaysWebViewvalue =true/> 
     




3. 试图将状态栏强制为 不重叠网页：

    code> // config.xml：
   < plugin name =org.apache.cordova.statusbarversion =0.1.7/> 
    
   < preference name =StatusBarOverlaysWebViewvalue =false/> 
   < preference name =StatusBarBackgroundColorvalue =＃000000/> 
   < preference name =StatusBarStylevalue =lightcontent/> 
     




4. 尝试将身体的边距顶部偏移20像素，这只是增加了一个20像素的死whitespace：

     // index.css：
    body {
    margin-top：20px;尝试将应用设置为    /cordova.apache.org/docs/en/3.3.0/config_ref_index.md.html#The%20config.xml%20File_global_preferences\">萤幕，这对应用程式毫无影响：
     // config.xml：
   < preference name =Fullscreenvalue =true/> 
     
    




5. 我甚至使用Safari检查器删除 c $ c> DOM节点，它仍然滚动20像素，告诉我它与HTML没有什么关系Cordova的WebView的实现。




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

解决方案

必须从以下位置替换 meta 视口设置：

 < meta name =viewportcontent =user-scalable = no，initial-scale = 1，
 maximum-scale = 1，minimum-scale = 1，width = device-width，
 height = device- height，target-densitydpi = device-dpi/> 
  

：

 < meta name =viewportcontent =user-scalable = no，initial-scale = 1，
 maximum-scale = 1，minimum-scale = 1，target-densitydpi = device -dpi/> 
  

看起来 height = device-height 正在考虑完整的设备高度，包括状态栏。我确实看到了一个方法来解决这个问题，对于感兴趣的人，这是由这个StackOverflow答案。我没有看到任何缺点删除完全（对于针对iOS 6 +的Cordova应用程序）。

I am building a Cordova app, and I'm testing it on my iOS 6 device (iPod Touch w/ iOS 6.1.6). For some reason, the WebView is scrollable with an extra 20px, seemingly making up for the 20px status bar at the top of the screen. This sometimes causes the scrollable WebView to take focus, essentially causing "nothing" to scroll in the eyes of the user, rather than allowing scrollable divs in my app to scroll. I have tried numerous fixes pertaining to config.xml changes, plugins, etc, but nothing makes a difference, which I've outlined below.

1. Tried manually hiding the status bar, with no effect.

   // 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. Tried forcing the status bar to overlay the webview, essentially making the app a full 480px tall (instead of 460px):

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

3. Tried forcing the status bar to 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. Tried offsetting the body's margin-top by 20px, which just adds an extra 20px of dead whitespace:

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

5. Tried setting the app to fullscreen, which literally has no effect on the app whatsoever:

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

6. I even used Safari inspector to delete the body DOM node altogether, and it still scrolls 20px, telling me that it has nothing to do with the HTML so much as Cordova's implementation of the WebView.

Does anyone have a solution for this? I can't be the only one out there encountering this.

解决方案

Figured it out after almost 8 hours of tinkering. Had to replace the meta viewport setting from this:

<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" />

to this:

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

It seems that height=device-height was taking the full device height into account, including the status bar. I did see a way to work around this in JavaScript for those who are interested, which is covered by this StackOverflow answer. I don't see any drawback to removing altogether though (for a Cordova app targeting iOS 6+).

这篇关于为什么我的Cordova WebView有额外的20px的滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！