android - phonegap 应用程序未在方向更改时更新样式

Question

我正在为 Android 和 iOS 设备构建一个 phonegap 应用程序。一切正常，但我有一个默认宽度为 100% 的弹出菜单。它在纵向模式下覆盖了 100% 的宽度，但是当我将其更改为横向模式时，它随机将纵向模式样式应用于弹出窗口，它只是覆盖了过去的宽度。

如何确保通过方向更改样式得到更新而不会失败？我能够在 chrome 开发工具模拟器、android 和 iOS 设备中重现这种情况。

下面的 dom 元素是由 Kendo 创建的。并且样式是即时生成的。

下面的样式是为纵向模式生成的

而这个是用于产生问题的横向模式。它非常随机，没有特定的模式。

Answer 1

目前，我找到了一种解决方法，我将高度设置为 100%，将 left:0px 设置为 left:0px 以获得所需的行为。虽然问题是上面共享的 dom 元素是由 kendo 生成的并且没有唯一的 ID，所以我使用 .closest 来获取这些父元素。

kendo popover 也有 open 事件，这有助于设置这种风格。

onFooterOpen: function() {
        $( "#more-option" ).closest( ".k-animation-container" ).css("width","100%");
        $( "#more-option" ).closest( ".km-popup-wrapper" ).css("width","100%");
        $( "#more-option" ).closest( ".k-animation-container" ).css("left","");
}