The only way that the map will display the full width and height of the browser window is if you specify the width and height of the map in pixels and not percentages. For example, the following would set the map to 600 pixels by 600 pixels.
<style type="text/css">
#map{
width:600px;
height:600px;
}
</style>
But this is a pain because you can only hardcode the dimensions for the map for one device and it will not take into account devices with different screen sizes. But I found the following code that will detect the width and height of the display canvas of your application for the device you are using and automatically adjust the map's dimensions to those calculated numbers.
<script language="JavaScript">
function viewPort() {
var h = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
var w = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
return { width : w , height : h }
}
var mapH = viewPort().height+20;
var mapW = viewPort().width;
$(document).ready(function() {
$("#map").css({"width":mapW+"px","height":mapH+"px"});
});
</script>
This code only applies to the map's width and height. You still need to set the padding to 0px in the div of your code.
<div data-role="content" id="mapcontent" style="padding:0px">
<div id="map"></div>
</div>
I added 20 additional pixels for the height because I found that on my iOS device the map was just a little short and displayed a small blank area at the bottom of the screen. The additional 20 pixels fills out the map to the full height of the device. I don't know if this extra 20 pixels is required for other devices but it's not significant. I've tested this code on iOS devices and one Android 2.3 phone and it works just fine.
