jquery mobile set my screen size to 100 percent
Question
I'm trying to set my master layout for an html5 app that will be used on an iPad. 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 .
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). 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.
Update1: The 1 or 2 pixel scrolling is fixed. Now I just need to have my main "panel" go full 100% - footer size.
3 answers
solution1
2 2014-01-27 16:42:12
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.
solution2
1 2014-01-27 16:47:09
这通常对我有用
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
solution3
0 ACCPTED 2014-01-27 17:12:56
Crap, my jQuery for the panelMain was missing the freaking hashtag/pound symbol in front. It works now!!!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.