jQuery Mobile中的页面高度不正确

I'm developing a web application using jQuery Mobile 1.2.0 and the page height is being calculated correctly on iOS and Android but not on Windows Phone, which has a gap on the bottom of the page.

我正在使用jQuery Mobile 1.2.0开发一个Web应用程序，并且在iOS和Android上正确计算了页面高度，但在Windows Phone上没有正确计算，这在页面底部有差距。

Any idea how I can fix it, preferably only with CSS?

知道如何修复它，最好只用CSS吗？

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World jQuery Mobile</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /></script>
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
    </head>
    <body>
        <div data-role="page" style="background:green">
            <div data-role="header">
                <h1>Page Title</h1>
            </div>
            <div data-role="content">
                <p>Page content goes here.</p>
            </div>
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>
        </div>
    </body>
</html>

2 个解决方案

#1

This is a known issue. You may hardcode the min-height for body via CSS (portrait mode only) or do the following.

这是一个已知的问题。您可以通过CSS（仅限纵向模式）对身体的最小高度进行硬编码，或执行以下操作。

function bodyMinHeightFix() {
    var isWp7 = window.navigator.userAgent.indexOf("IEMobile/9.0") != -1;

    if (!isWp7) return;

    // portrait mode only
    if(window.innerHeight <= window.innerWidth) return;

    var zoomFactorW = document.body.clientWidth / screen.availWidth;

    // default value (web browser app)
    var addrBarH = 72;

    // no app bar in web view control
    if (typeof window.external.Notify !== "undefined") {
        addrBarH = 0;
    }

    var divHeightInDoc = (screen.availHeight-addrBarH) * zoomFactorW;
    //$("body")[0].style.minHeight = divHeightInDoc + 'px';

    var page = $("div[data-role='page']");
    if (page.length > 0)
        page[0].style.setProperty("min-height", divHeightInDoc + "px", 'important');

}

https://github.com/sgrebnov/jqmobile-metro-theme/blob/master/themes/metro/jquery.mobile.metro.theme.init.js

On Windows Phone 8 you can use the following

在Windows Phone 8上，您可以使用以下内容

@media screen and (orientation: portrait) {
    @-ms-viewport {
        width: 320px;
        user-zoom: fixed;
        max-zoom: 1;
        min-zoom: 1;
    }
}

@media screen and (orientation: landscape) {
    @-ms-viewport {
        width: 480px;
        user-zoom: fixed;
        max-zoom: 1;
        min-zoom: 1;
    }
}

#2

@Sergei's answer: The fix worked for my first page , but my other main pages have fixed footers which are still "floating" above a white space.

@谢尔盖的答案：修复工作适用于我的第一页，但我的其他主页都有固定的页脚，它仍然“漂浮”在空白区域上方。

It is definitely less white space before though ( footers positioned slightly above the middle of the screen)

它之前肯定是较少的空白区域（页脚略微位于屏幕中间位置）

I tried to run the code again on page change and to change the body's, with class "ui-mobile-viewport" ,height but it did not work.

我尝试在页面更改时再次运行代码并更改正文，使用类“ui-mobile-viewport”，高度但它不起作用。

Hope you can help. Thank!

希望你能帮忙。谢谢！

#1