jQuery Mobile 2-page Base Fiddle

by sramam

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <div data-role="page" id="p1" data-fullscreen="true" class="type-interior"> 
    <div  data-role="header"><h1 id="heading">Orientation Example</h1></div> 
    <div  data-role="content" class="ui-content">
      <div id="orient"></div>
    </div>
    <div  data-role="footer"><h4 id='flair'></h4></div> 
  </div>

CSS

</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
<style>
#orient {
  display:block;
  background: #99f;
  color: #000;
  clear: both;
  margin:0;
  display: block;
}

@media screen and (max-width: 320px) {
    /* portrait mode css rules */
    #p1 {
        background: #ff0;
    }
    #orient {
       min-height:300px;
    }
}

@media screen and (min-width: 321px) {
    /* landscape mode css rules */
    #p1 {
        background: #9fc;
    }
    #orient {
       min-height:480px;
    }

}

JavaScript

$(window).bind('orientationchange', function(e) {
    console.log('orientationchange:' + e.orientation)
    if (e.orientation === 'portrait') {
        // do portrait stuff
        $('#heading').html('Portrait Mode')
        $('#orient').append('<div>Portrait Mode<div>')
    } else if (e.orientation === 'landscape') {
        // do landscape stuff
        $('#heading').html('Landscape Mode')
        $('#orient').append('<div>Landscape Mode</div>')
    }
})