Самый простой способ - использовать проект jQuery Mobile вместе с некоторыми лучшими практиками CSS для высоты и небольшим дополнительным скриптом.
Вот базовая плита, с которой вы можете работать.
<!DOCTYPE html>
<html>
<head>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='default' name='apple-mobile-web-app-status-bar-style'>
<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<title>Example jQuery Mobile / Full-Height Content</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js' type='text/javascript'></script>
<style>
@media screen and (orientation: landscape) {
html, body {
width: 100%;
}
.content h1.landscape { display: block }
.content h1.portrait { display: none }
}
@media screen and (orientation: portrait) {
html, body {
width: 100%;
}
.content .landscape { display: none }
.content .portrait { display: block }
}
</style>
<link href='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css' rel='stylesheet'>
</head>
<body>
<div data-role='page' data-theme='a'>
<div class='header' data-role='header'>
<h1>header</h1>
</div>
<div class='content' data-role='content'>
<h1 class="landscape">landscape!</h1>
<h1 class="portrait">portrait!</h1>
</div>
<div class='footer' data-role='footer'>
Nothing to see here.
</div>
</div>
<script>
(function() {
var fixgeometry = function() {
/* Some orientation changes leave the scroll position at something
* that isn't 0,0. This is annoying for user experience. */
scroll(0, 0);
/* Calculate the geometry that our content area should take */
var header = $(".header:visible");
var footer = $(".footer:visible");
var content = $(".content:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
/* Trim margin/border/padding height */
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
}; /* fixgeometry */
$(document).ready(function() {
$(window).bind("orientationchange resize pageshow", fixgeometry);
});
})();
</script>
</body>
</html>
Надеюсь, это поможет вам начать.