Why do I have to reload the page to display the map correctly?

I asked this question already here, unfortunately the problem could not be solved, so I ask here :)

I've got a JQM page in which I show a map. Stupidly, to show the map correctly, I have to reload the page.

This is how the map gets displayed on the first load of the page:

And this is how it gets displayed after refreshing the page:

Here is my code:

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

And this is how I style the map:

<style>
    html, body, #map {
        padding: 0;
        margin: 0;
        height: 100%;
    }
</style>

And how I display it:

<div data-role="page" style="background-color:red" ...>
    <!--Header-->
        ....
    <!--/Header-->
    <!--Content-->
        <div id="map">
        </div>
    <!--/Content-->
</div>

EDIT:

After putting this code of line:

$(document).on("pageshow","#page",function(){ // initialize map and show
});

the Map looks like this now:

Is it possible to set the width and height to 100%?

Map needs a canvas with defined width and height. In Jquery mobile handles pages differently than normal html pages. i.e. one page (i.e. div with data-role=page) is visible at a time, others are not. So initializing map on any page should be done with jquery mobile specific page event called pageshow

$(document).on("pageshow","#page",function(){ // initialize map and show
});