Sencha Touch在PhoneGap webview中呈现的不同于移动Safari

Question

我有一款适用于桌面Chrome，移动版Safari和Android默认互联网浏览器的Sencha Touch应用。

然而，一旦我将它包装在PhoneGap中，一些嵌套的TabPanels开始使用两个底座进行渲染（一个在顶部，一个在底部），子面板不符合它们的正确尺寸，有时整个文档向上移动（大约与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
• 从我的Viewport的initComponent
中删除项目实例
• 将脚本移动到body标签中，希望它们能够获得正确呈现的文档边界

看起来面板和tabpanels添加得很好，但嵌套的tabpanels却没有。请记住，在 PhoneGap应用程序包装双击claptrap事故之前，这些相同的嵌套tabpanels在所有其他浏览器中呈现完美。

Answer 1

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

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

在受影响的TabPanels中，这可以防止残留的TabBars呈现：

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

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