header location iPhone start from Home Screen

header location iPhone start from Home Screen

I have a web app that I converted from jQTouch to jQuery Mobile and it works beautifully in browser mode on iPhone, but when I use the Add to Home Screen feature I have a problem. When it runs in this mode the header bars are partly hidden by the phone's status bar at the top. My workaround is to set a margin-top for the ui-header class, but then it looks a little silly in browser mode. Is there a way to get proper behavior in both modes?

  1. <head>
  2. <meta name="viewport" content="width=device-width, initial-scale=1"> 
  3. <meta name="apple-mobile-web-app-capable" content="yes">  
  4. <link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css">
  5. <title>TM Data</title>
  6. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  7. <script src="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  8. </head>
  9.     <body>
  10.         <!-- Home -->
  11.         <div data-role="page" id="home">
  12.             <div data-theme="b" data-role="header">
  13.                 <h3>TM Data</h3>
  14.                 <a data-role="button" href="#setupHelp" data-icon="gear" class="ui-btn-right" data-transition="flip">Setup</a>
  15.             </div>
  16.             <div data-role="content"> ....

Let me know if screen shots would help.

Thanks,