Question

我正在尝试为将在iPad上使用的html5应用设置我的主布局。起初，我的内容只与其中包含的数据一样大。所以我决定尝试将左侧面板和主面板的高度设置为“窗口”大小减去“页脚”大小。这样做之后，它仍然没有达到我的屏幕的全长，但它也超出了我的屏幕大小，导致了一个辅助滚动条。

这是jsFiddle。

以下是快速浏览的代码：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8" />
    @*<meta name="viewport" content="width=device-width" />*@
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, height=device-height, width=device-width, user-scalable=no">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <meta name="description" content="WrestleStat" />
    <link rel="stylesheet" href="~/Content/jQueryMobile/jquery.mobile-1.4.0.css" />
    <script src="~/Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="~/Scripts/jQueryMobile/jquery.mobile-1.4.0.js" type="text/javascript"></script>
    <style>
        div>ul>li>a.ui-btn{
            height: 60px;
        }
    </style>
</head>
<body style="height: 100%">
    <!--
        We want to have 4 main sections in our master layout
        1) A left panel to select/search the different locations
        2) Primary panel
        3) Footer to act like a tab screen
    -->
    <div role="main" class="ui-content jqm-content" style="padding: 0; height: 100%">
        <div class="ui-grid-a">
            <div id="panelLeft" class="ui-block-a" style="width: 20%; background-color: black; color: white; min-height: 768px;">
                @RenderSection("panelLeft", true)
            </div>
            <div id="panelMain" class="ui-block-b" style="width: 80%; background-color: gold; min-height: 768px;">
                @RenderBody()
            </div>
        </div>

        <div id="footer" data-role="footer" data-theme="b" data-position="fixed" style="height: 60px">
            <div data-role="navbar">
                <ul>
                    <li><a href="#" style="font-size: x-large">Nav One</a></li>
                    <li><a href="#" style="font-size: x-large">@RenderSection("footer")</a></li>
                    <li><a href="#" style="font-size: x-large">Nav Three</a></li>
                    <li><a href="#" style="font-size: x-large">Nav Four</a></li>
                    <li><a href="#" style="font-size: x-large">Nav Five</a></li>
                </ul>
            </div>
        </div>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

<script type="text/javascript">
    $(document).ready(function () {
        var windowHeight = $(window).height();
        var footer = $("#footer");
        var footerHeight = footer.outerHeight() -1;

        $(".ui-grid-a").height(windowHeight - footerHeight);
        $("#panelLeft").height(windowHeight - footerHeight);
        $("panelMain").height(windowHeight - footerHeight);
    });
</script>

我希望能够将所有内容都设置为100％的屏幕尺寸，并为iPad mini设置最小尺寸（我认为是768px）。我不相信我们会有超出观看区域的内容，但为了以防万一，在这种情况下需要垂直滚动。不过，我并不担心。

编辑/注意：我刚刚意识到你无法让jsFiddle屏幕足够大，看看问题是什么......需要在1920x1080显示器上全屏显示。

Update1： 1或2像素滚动是固定的。现在我只需要让我的主“面板”达到100％ - 页脚大小。

Answer 1

试试这个。

<META name="viewport" content="initial-scale=1.0, maximum-scale=1.0, height=device-height, width=device-width, user-scalable=no">

希望这有帮助。

Answer 2

这通常对我有用

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Answer 3

Crap，我面板上的jQuery错过了前面那个怪异的hashtag / pound符号。它现在有效!!!

jquery mobile将我的屏幕大小设置为100％

3 个答案: