为啥我的 Cordova WebView 有 20px 的额外滚动?

Posted

技术标签:

【中文标题】为啥我的 Cordova WebView 有 20px 的额外滚动?【英文标题】:Why does my Cordova WebView have an extra 20px of scrolling?为什么我的 Cordova WebView 有 20px 的额外滚动? 【发布时间】:2014-10-07 08:19:29 【问题描述】:

我正在构建一个 Cordova 应用程序,并在我的 ios 6 设备(带 iOS 6.1.6 的 iPod Touch)上对其进行测试。出于某种原因,WebView 可以额外滚动 20px,这似乎弥补了屏幕顶部的 20px 状态栏。这有时会导致可滚动的 WebView 获得焦点,本质上导致“没有”在用户眼中滚动,而不是允许我的应用程序中的可滚动 divs 滚动。我已经尝试了许多与 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,本质上使应用程序的高度为 480 像素(而不是 460 像素):

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

    尝试将 body 的 margin-top 偏移 20px,这只是增加了额外的 20px 死空白:

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

    尝试将应用设置为fullscreen,这实际上对应用没有任何影响:

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

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

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

【问题讨论】:

【参考方案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 *** answer 对此进行了介绍。不过,我认为完全删除没有任何缺点(对于针对 iOS 6+ 的 Cordova 应用程序)。

【讨论】:

【参考方案2】:

你在设备上试过了吗?

window.StatusBar.overlaysWebView(false);

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

【讨论】:

这个理论上应该和&lt;preference name="StatusBarOverlaysWebView" value="false" /&gt;的效果一样。试了一下,滚动没区别。 对不起,伙计!祝你好运,对这个问题投了赞成票,因为我相信我将来也会遇到同样的问题。【参考方案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);

                );
])

【讨论】:

我没有在我的项目中使用这些技术,但我相信这会对遇到这个问题的人有所帮助。 :) 感谢分享! 不回答 OP

以上是关于为啥我的 Cordova WebView 有 20px 的额外滚动?的主要内容,如果未能解决你的问题,请参考以下文章

Android Cordova:使 WebView HTML 元素透明以查看原生元素

Cordova Google WebView SSL 错误处理程序警报

如何调整cordova webview ios 10的大小

为啥多个 WebView 不能共享缓存?

Cordova InAppBrowser 和与 webview 共享的 cookie

当前维护的cordova-plugin-crosswalk-webview 有啥替代方案吗?