jQuery mobile将我的屏幕尺寸设置为100％

Question

I'm trying to set my master layout for an html5 app that will be used on an iPad. 我正在尝试为将在iPad上使用的html5应用程序设置主布局。 At first, my content was only as large as the data that was contained inside it. 最初，我的内容仅与其中包含的数据一样大。 So I decided to try and set the height of my left panel and main panel to the 'window' size minus the 'footer' size. 因此，我决定尝试将左面板和主面板的高度设置为“窗口”大小减去“页脚”大小。 After doing that, it still doesn't go to the full length of my screen, but it ALSO goes just beyond the size of my screen, causing a secondary scrollbar. 完成此操作后，它仍然不能完全显示在我的屏幕上，但是它也超出了我的屏幕大小，从而导致了第二个滚动条。

Here's the jsFiddle . 这是jsFiddle 。

Here's the code for a faster glance: 这是快速浏览的代码：

<!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>

I'd like to be able to just have everything be 100% of the screensize, with the smallest dimensions set for an iPad mini (which I believe is 768px). 我希望所有内容都可以达到屏幕尺寸的100％，并为iPad mini（我认为是768像素）设置最小的尺寸。 I don't believe we'll have content that goes beyond the viewing area, but just in case, a vertical scroll would be necessary in that situation. 我认为我们的内容不会超出查看范围，但以防万一，在这种情况下，垂直滚动是必要的。 I'm not worried about that yet, though. 不过，我还不为此担心。

Edit/Note: I just realized you can't get the jsFiddle screen big enough to see what the problem is...need to go full screen on a 1920x1080 monitor. 编辑/注意：我只是意识到您无法将jsFiddle屏幕放大到足以看到问题所在...需要在1920x1080显示器上全屏显示。

Update1: The 1 or 2 pixel scrolling is fixed. Update1： 1或2像素滚动固定。 Now I just need to have my main "panel" go full 100% - footer size. 现在，我只需要使我的主“面板”满100％-页脚大小即可。

Answer 1

Try this. 尝试这个。

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

Hope this helps. 希望这可以帮助。

Answer 2

这通常对我有用

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

Answer 3

Crap, my jQuery for the panelMain was missing the freaking hashtag/pound symbol in front. 糟糕，我的panelMain jQuery缺少前面的奇怪的＃标签/磅符号。 It works now!!! 现在可以使用了！！！

jQuery mobile将我的屏幕尺寸设置为100％

问题描述

3 个解决方案

解决方案1
2 2014-01-27 16:42:12

解决方案2
1 2014-01-27 16:47:09

解决方案3
0 已采纳 2014-01-27 17:12:56

jQuery mobile将我的屏幕尺寸设置为100％

问题描述

3 个解决方案

解决方案1 2 2014-01-27 16:42:12

解决方案2 1 2014-01-27 16:47:09

解决方案3 0 已采纳 2014-01-27 17:12:56

解决方案1
2 2014-01-27 16:42:12

解决方案2
1 2014-01-27 16:47:09

解决方案3
0 已采纳 2014-01-27 17:12:56