There are several threads that discuss various resize issues with the map objects. One of the recommendations is to have the autoResize parameter on the map constructor set to false. Then you have add a listener to manually execute map.resize and map.reposition. To me that's a very clunky solution and it would be better if there was something changed with the map object to handle this better. It helped me to have a listener on the transition between views. The functions for the mapHeight are something I got from an ESRI blog on designing for mobile, which included a sample to download.I still don't have all the kinks worked out. I think I have it working and then suddenly it will look all cropped again. If you perfect this, let me know and I'll fix my code too.
var map = new Map("mapDiv", {
basemap: "streets",
center: [-92.593, 38.5],
zoom: 6,
autoResize:false
});
map.on("load", mapLoadHandler);
function mapLoadHandler(evt){
registry.byId('mapView').on('AfterTransitionIn', resizeMap);
}
function resizeMap() {
mobile.hideAddressBar();
adjustMapHeight();
map.resize();
map.reposition();
}
function adjustMapHeight() {
var headHeight = registry.byId('mapHeader').domNode.clientHeight;
var availHeight = mobile.getScreenSize().h - headHeight - 60;
if (has('iphone') || has('ipod')) {
availHeight += iphoneAdjustment();
}
dom.byId("mapDiv").style.height = availHeight + "px";
dom.byId("mapDiv").style.width = "100%";
}
function iphoneAdjustment() {
var sz = mobile.getScreenSize();
if (sz.h > sz.w) { //portrait
//Need to add address bar height back to map because it has not been hidden yet 44 = height of bottom safari button bar
return screen.availHeight - window.innerHeight - 44;
} else { //landscape
//Need to react to full screen / bottom button bar visible toggles
var _conn = on(window, 'resize', function() {
_conn.remove();
resizeMap();
});
return 0;
}
}