title: Why does my Phonegap app cover the status bar of my mobile device?
body: <p>I am developing a phonegap app and for whatever reason the app is covering the status bar and I need to make sure this doesn't happen. The following picture is when I emulate the app on my iphone:</p>
  
  <p><img src="https://i.stack.imgur.com/Sijyf.png" alt="enter image description here"></p>
  
  <p>Here is a snippet of the code:</p>
  
  <pre><code>&lt;div data-role="header" data-position="fixed" class="header"&gt;
    &lt;a href="#all_phases"&gt;&lt;span class="ui-icon ui-icon-flat-menu"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;a href="#settings"&gt;&lt;span class="ui-icon ui-icon-flat-settings"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;h1&gt;My first page&lt;/h1&gt;
        &lt;/div&gt;
          &lt;div data-role="main" class="ui-content" id="question_1"&gt;
            &lt;div class="question"&gt;&lt;h4&gt;When is the last time you talked to your           ex?&lt;/h4&gt;&lt;/div&gt;
              &lt;div class="options"&gt;
                  &lt;a href="#phase1a" data-transition="none"&gt;&lt;div class="answer"&gt;   &lt;p&gt;Less than a week&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;a href="#phase1b" data-transition="none"&gt;&lt;div class="answer"&gt;&lt;p&gt;1 to 3 weeks&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;a href="#phase1c" data-transition="none"&gt;&lt;div class="answer"&gt;&lt;p&gt;Several months or more&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-role="footer" data-position="fixed" class="footer"&gt;
              &lt;div data-role="navbar"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#phase2" data-transition="none"&gt;Next&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>