jQuery Mobile 无法正确调整页面大小

Question

我正在使用 jQuery Mobile 开发 Phonegap 解决方案，但我遇到了页面大小调整问题。

如您所见，页面超出了屏幕大小，因此可以滚动。我试过在 pageshow 上调整大小，但没有成功:

    $(document).on('pageshow', '[data-role=page]', function () {
        $(window).resize();
    });

即使我从页面内部删除所有内容，它也会超出手机屏幕 - 手动调整浏览器屏幕的大小也无济于事。

有谁知道我可以做些什么来解决这个问题？

这是JQM注入(inject)一些样式和ui-panel-wrapper之后的代码:

<div (...) style="position: relative; padding-bottom: 35px; padding-top: 51px; min-height: 393px;">
(...)
</div>

更新
所以事实证明我遇到这个问题是因为两个 (css) 问题:

body {height: 100% }
[data-role="page"] {height: 100%;}

我添加这个是为了获得全屏谷歌地图。删除这些样式解决了我的问题。现在我只需要找到另一种方式来获取全屏 map 。

Answer 1

看起来您在内部 div 中有一个图像，这导致 div 大于页眉和页脚之间的剩余部分，因此窗口右侧的滚动条也是如此。调整大小无济于事，但您可以修复图像的尺寸以适应页眉和页脚，或者通过应用样式 overflow-y:hidden 隐藏滚动条。正如 Brewal 所说，更多代码可能会有所帮助。