我正在构建一个 Cordova 应用程序,并在我的 iOS 6 设备(带有 iOS 6.1.6 的 iPod Touch)上测试它。由于某种原因,WebView 可以额外滚动 20px,似乎弥补了屏幕顶部 20px 的状态栏。这有时会导致可滚动的 WebView 获得焦点,本质上导致在用户眼中“没有任何东西”滚动,而不是允许可滚动的div
在我的应用程序中滚动。我已经尝试了许多与 config.xml 更改、插件等相关的修复,但没有任何效果,我在下面概述了这一点。
-
Tried 手动隐藏状态栏 https://github.com/apache/cordova-plugin-statusbar/blob/master/doc/index.md#statusbarhide,没有效果。
// 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覆盖网络视图 http://devgirl.org/2014/07/31/phonegap-developers-guid/:
// 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;
}
-
尝试将应用程序设置为全屏 https://cordova.apache.org/docs/en/3.3.0/config_ref_index.md.html#The%20config.xml%20File_global_preferences,这实际上对应用程序没有任何影响:
// config.xml:
<preference name="Fullscreen" value="true" />
我什至使用 Safari 检查器来删除body
DOM 节点完全消失,而且它仍然滚动 20px,告诉我它与 HTML 无关,而与 Cordova 的 WebView 实现无关。
有人有解决方案吗?我不可能是唯一遇到这种情况的人。
经过近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" />
to this:
<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 答案 https://stackoverflow.com/a/19407903/107277。不过,我认为完全删除没有任何缺点(对于针对 iOS 6+ 的 Cordova 应用程序)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)