问题
I'm developing a Phonegap solution using jQuery Mobile and I'm having a problem with page resizing.
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?
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>
Update
So it turns out I got this problem because of two (css) things:
body {height: 100% }
[data-role="page"] {height: 100%;}
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.
回答1:
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.
来源：https://stackoverflow.com/questions/28721276/jquery-mobile-not-resizing-page-correctly