Why do I have to reload the page, to show the Map correctly?

Question

I added a map, in the way I'm supposed to, but why do I have to reload/refresh the page, to get the map (almost) as I want to? This is, what I mean:
Map before reloading the page:

Map after reloading the page:

Here is my Code:

var map;
    require([
        "esri/map",
        "dojo/dom",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "dojo/domReady!"],
        function (Map, dom, Tiled) {
                ....
            var map = new Map("map", {
                logo: false
        });
});
    ...
    var luftbild = new Tiled(URL);
    map.addLayer(luftbild);

And this is how I display the map:

<div data-role="page" ...>
        <div class="ui-bar-a ui-header">
            ...
            <h1 role="heading" class="ui-title">Karte</h1>
        </div>
        <div data-role="content">
            <div id="map" style="width: 100%; height: 100%;">
            </div>
        </div>
</div>

I'm developing with jquery mobile and the ESRI API for JS (in Visual Studio 2013)

EDIT

I managed that the map gets displayed well the first time the page has loaded:

I just wrapped the code from above with:

$(document).ready(function(/*JS code from above*/));

But I still have to reload the page, to display the map as I want to:

How can I force a reload just on this site, ASAP the site is done with loading?

Answer 1

Try looking into Dojo Mobile instead because ESRI JSAPI is built on top of that. jQuery mobile may take a bit more work to get working for this purpose. I have not tried it myself, but have had good experiences with Dojo Mobile and ESRI JSAPI.