jQuery Mobile无法正确调整页面大小 [英] jQuery Mobile not resizing page correctly

问题描述

我正在使用jQuery Mobile开发Phonegap解决方案，但是页面大小调整存在问题.

I'm developing a Phonegap solution using jQuery Mobile and I'm having a problem with page resizing.

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

As you can see, the page goes beyond screen size and thus enables scrolling. I've tried resizing on pageshow, but no succcess:

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

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

Even if I remove everything from inside the page, it goes beyond the phones screen - and manually resizing the browser screen doesn't help.

有人知道我可以解决此问题吗?

Does anyone know what I can do to fix this issue?

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

This is the code after JQM has injected some styles and ui-panel-wrapper:

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

更新
事实证明，由于两个(css)问题，我遇到了这个问题:

Update
So it turns out I got this problem because of two (css) things:

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

我添加了此内容是为了获得全屏Google地图.删除这些样式解决了我的问题.现在，我只需要寻找另一种获取全屏地图的方法.

I had added this in order to get full screen google maps. Removing these styles fixed my problem. Now I just have to find another way to get full screen maps.

推荐答案

内部div中似乎有一个图像，这会使div大于页眉和页脚之间的剩余空间，因此也使窗口的右侧.调整大小无济于事，但是您可以将图像的尺寸固定为适合页眉和页脚，也可以通过应用样式overflow-y:hidden隐藏隐藏的滚动条.正如Brewal所说，更多代码可能会有所帮助.

It looks like you have an image inside the inner div, which causes the div to be bigger than what's left between header and footer, hence also the scrollbar on the right side of the window. Resizing won't help, but you could fix the dimensions of the image to fit between header and footer, or hide the scrollbar by applying the style overflow-y:hidden. As Brewal remarked, more code might help.

这篇关于jQuery Mobile无法正确调整页面大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！