0

jquery モバイルを使用してシンプルなナビゲーション バーを作成しようとしていますが、デスクトップでは奇妙に見えます。

http://imgur.com/7BIgUQx

開始ページ「./overview」にジャンプすると、メニュー全体が大きくなり、奇妙な行が表示されます。2 番目のメニュー項目をクリックすると、メニューが小さくなり、正しく表示されます。Firefox で再現できるかどうかを確認したところ、概要ページに固有のものではないことに気付きました。ドメインの後に「./stats」と入力すると、統計ページに移動し、メニューが再び別の方法でレンダリングされます。概要ページに戻ると、メニューは正常に見えます。そのため、URL バーに入力したページでのみメニューが正しく表示されないようです。別のページに切り替えると、バーの URL が更新されますが、見た目は問題ありません。メニューを元に戻すと、その行がスローされてメニューが再び大きくなります。

両方のページのソースを確認しましたが、同じに見えるので、他に何を確認すればよいかわかりません。

概要

<html>
  <header>
    <title>Overview</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  </header>
  <body>
    <h1>Overview</h1>
    <h3></h3>

    <div data-role="header" data-id="foo1" data-position="fixed">
      <div data-role="navbar">
    <ul>
      <li><a href="/10/overview" class="ui-btn-active ui-state-persist">Overview</a></li>
      <li><a href="/10/stats">Status</a></li>
    </ul>
      </div><!-- /navbar -->
    </div><!-- /footer -->
  </body>
</html>

統計

<html>
  <header>
    <title>Stats</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  </header>
  <body>
    <h1>Stats</h1>
    <h3></h3>

    <div data-role="header" data-id="foo1" data-position="fixed">
      <div data-role="navbar">
    <ul>
      <li><a href="/10/overview">Overview</a></li>
      <li><a href="/10/stats" class="ui-btn-active ui-state-persist">Stats</a></li>
    </ul>
      </div>
    </div>
  </body>
</html>

このメニューの拡大の原因を知っている人はいますか?

4

1 に答える 1

1

両方のページのヘッドタグの間に以下のタグを含めます。

<title>Stats</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
于 2013-03-01T05:26:24.137 に答える