Android上的PhoneGap / jQuery Mobile被推倒

Question

我刚刚开始使用jQuery Mobile的Phone Gap，所以我不太清楚如何调试以及模拟器上有哪些调试工具。

标题栏会在Android模拟器（AVD_for_Nexus_7_by_Google）上稍微向下推。但是，iOS模拟器和Web浏览器上的一切看起来都很好。

任何想法可能会发生什么或我可能尝试调试这个？

以下是代码：

  <!-- Start of index page -->
  <div data-role="page" id="index">
    <div data-role="header">
      <a href="index.html" data-icon="home" class="ui-btn-left" data-transition="slide" data-direction="reverse">Home</a>
      <h1>Hello!</h1>
    </div><!-- /header -->

    <div data-role="content"> 
      <ul data-role="listview" data-filter="true" data-inset="true">
        <li><a href="" data-transition="slide">hihi</a>
          <ul data-role="listview" data-filter="true" data-inset="true">
            <li><a href="" data-transition="slide">hihi1</a>
              <ul data-role="listview" data-filter="true" data-inset="true">
                <li>examplea</li> 
                <li>exampleb</li> 
                <li>exampleb</li> 
              </ul>
            </li>
            <li><a href="" data-transition="slide">hihi2</a>
              <ul data-role="listview" data-filter="true" data-inset="true">
                <li>example2</li> 
                <li>example2</li> 
                <li>example2</li> 
              </ul>
            </li>
            <li><a href="" data-transition="slide">hihi3</a>
              <ul data-role="listview" data-filter="true" data-inset="true">
                <li>example3</li> 
                <li>example3</li> 
                <li>example3</li> 
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div><!-- /content -->
  </div><!-- /page -->

这是我所看到的图像：

感谢您的时间！

Answer 1

在代码中添加margin-top:0。

代码是： -

.ui-shadow, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a, .ui-body-b, .ui-btn-up-b, .ui-    btn-hover-b, .ui-btn-down-b, .ui-bar-c, .ui-body-c, .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c, .ui-bar-c, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d, .ui-bar-d, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e, .ui-bar-e, .ui-overlay-shadow, .ui-shadow, .ui-btn-active, .ui-body-a, .ui-bar-a {
    box-shadow: none;
    margin-top: 0;
    text-shadow: none;
}

只需将其添加到您的CSS中即可。还要记住PhoneGap很简单，只需确保您正确阅读文档。