Sencha Touch 在 PhoneGap webview 中的渲染与在移动 Safari 中的不同

Question

我有一个 Sencha Touch 应用，在桌面 Chrome、移动 Safari 和 Android 的默认互联网浏览器中运行良好。

但是，一旦我将它包装在 PhoneGap 中，一些嵌套的 TabPanel 开始呈现两个停靠栏（一个在顶部，一个在底部），子面板不符合它们的正确大小，有时整个文档会向上移动（和 UIStatusBar 的距离差不多，所以我想知道是否有连接）。在这一点上，我没有覆盖任何 Objective-C 方法，我几乎遵循 MVC Sencha Touch PhoneGap example 的结构。

我所有的 CSS 以及 Sencha CSS 都包含在内。

PhoneGap 封装后，有没有人在移动 Safari 和 webview 之间经历过这样的渲染差异？如果是这样，甚至更好，有没有人解决这个问题？

编辑：

到目前为止，我已经尝试了一些事情：

• 在加载 PhoneGap JS 之前/之后移动应用程序 JS
• 更改调用 document.addEventListener("deviceready"...); 的时间/方式
• 将.../css/sencha-touch.css 更改为.../css/apple.css
• 从我的视口的 initComponent 中删除项目实例
• 将脚本移动到正文标签中，希望它们获得正确呈现的文档边界

看起来面板和选项卡面板添加得很好，但嵌套选项卡面板没有。请记住，在 PhoneGap 应用程序包装双击拍手事故发生之前，这些相同的嵌套标签面板在所有其他浏览器中都可以完美呈现。

Answer 1

好吧，我已经基本修复了我遇到的外观差异（减去一些小的 CSS），但仍然不知道为什么 Sencha 在 WebView 中的呈现与在常规 Mobile Safari 中的呈现不同。

我所做的 Sencha 更改不应影响它在任何其他桌面或移动 webkit 浏览器中的显示方式。我最终只是强制隐藏了嵌套 TabPanels 的 TabBars（之前没有渲染过）。我正在使用其他方式来设置活动项目，并且不需要或看到它们关联的 TabBars。 （我将这些 TabPanel 用于它们的可用方法和属性，而不是它们关联的 TabBar。）

在受影响的 TabPanel 中，这会阻止残留的 TabBars 呈现：

tabBar: {
    hidden: true,
    height: 0
},

如果有人对此类渲染差异有任何经验，请随时分享以供将来参考。