Menu
I have a problem dealing with the website height on an iphone. The following set up works pretty well on all other devices (ipad,android phones), but on an iphone device the site height won't get updated after the url bar disappears and a blank area is visible at the bottom of the page.
<!DOCTYPE html>
<html>
<head>
<title>temp</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style type="text/css">
.ui-page{
min-height: 100% !important;
}
</style>
</head>
<body>
<div data-role="page" id="loadscreen" data-theme='c'>
<div data-role="content">
<div>
<a href="#" onClick="window.scrollTo(0, 1)">Scroll Up</a>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Site: http://jsfiddle.net/hb8NH/2/
815
asked Nov 22 '25 22:11
Remove
.ui-page{
min-height: 100% !important;
}
JQueryMobile calculates the necessary height and sets the Min-Height style to the Page to make sure it fills the entire page.
You'll notice that on an iPhone in Safari (after removing the min-height) that you get a slight over scroll available that will hide your "Scroll Up" text. JQueryMobile is calculating the min height based on screen size i believe. That way if saved to the home screen of the iphone (where there are no safari toolbars, header or footer) your page will still fill the screen.
192
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
