jQuery Mobile中的页面高度不正确 [英] Incorrect page height in jQuery Mobile

查看:279
本文介绍了jQuery Mobile中的页面高度不正确的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用jQuery Mobile 1.2.0开发一个Web应用程序,页面高度正在iOS和Android上正确计算,但不在Windows Phone上,页面底部有间隙。

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.

任何想法如何解决它,最好只有CSS?

Any idea how I can fix it, preferably only with 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>


推荐答案

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

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

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

在Windows Phone 8上,您可以使用以下

On Windows Phone 8 you can use the following

@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;
    }
}

这篇关于jQuery Mobile中的页面高度不正确的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆