gpt4 book ai didi

javascript - jquery mobile 将我的屏幕大小设置为 100%

转载 作者:太空宇宙 更新时间:2023-11-03 23:46:50 25 4
gpt4 key购买 nike

我正在尝试为将在 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 设置最小尺寸(我认为是 768 像素)。我不相信我们会有超出查看区域的内容,但以防万一,在这种情况下需要垂直滚动。不过,我还不担心。

编辑/注意:我刚刚意识到您无法将 jsFiddle 屏幕设置得足够大以查看问题所在...需要在 1920x1080 显示器上全屏显示。

更新 1: 1 或 2 像素滚动已修复。现在我只需要让我的主“面板”100% 满 - 页脚大小。

最佳答案

试试这个。

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

希望这对您有所帮助。

关于javascript - jquery mobile 将我的屏幕大小设置为 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21386380/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com