jquery/jquery-mobile — Issue #3371: Do not hardcode the minimum screen height
Author: dilbert-elbonia
Created: 2012-01-02 17:57:18+00:00
State: open

I found this in jquery.mobile-1.0.css:
/*orientations from js are available */
@media screen and (orientation: portrait){
.ui-mobile, .ui-mobile .ui-page { min-height: 420px; }
}
@media screen and (orientation: landscape){
.ui-mobile, .ui-mobile .ui-page { min-height: 300px; }
}

The css assumes that all devices have at least 420px height in portrait mode which is not true on my HTC Tatoo (it only has 320 px). This causes the displayed page to be scrollable which is not what is intended. I can scroll the page down so that the header dissapears.

To reproduce You can use the following html:
<!doctype html>
<html class="ui-mobile">
<head>
<meta charset="utf-8">
<title>Pozicije</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/css/jquery.mobile-1.0.css"/>
<script src="js/jquery/jquery-1.7.1.js"></script>
<script src="js/jquery/jquery.mobile-1.0.js"></script>
</head>
<body style="background-color: green;">
<div data-role="page" style="background-color: blue;" id="androidTest">
<div data-role="header">
<h1>Title</h1>
</div>
<div data-role="content">
<p>Hello world</p>
</div>
</div>
</body>
</html>

Notice that the css is served locally. The bug manifests itself when you put the min-height to a value that is bigger (say by 50 px) than the screen height of your device.