0

I'm trying jQuery's example on navbars but it's not working as intended.

When loading it on my notebook, navbar size is perfect. When I try it on my phone, the buttons are cropped.

Here's the simple code:

<div data-role="footer">    
    <div data-role="navbar">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
       </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

and here's what I get:

Desktop

Mobile

Am I doing something wrong?

4

1 に答える 1

0

次のいずれかの問題である可能性があります。

  1. jQuery.Mobile の CSS が古いか、使用している jquery.mobile.js ファイルとはバージョンが異なります。
  2. これを壊しているカスタム css をどこかに追加しました。
  3. これは私の最も可能性の高い投票です。ページのどこかで、タグが一致していないか閉じられていないため、ブラウザーがそれを補っています。デスクトップ ブラウザーでは正しく補正されますが (不正なコードをより適切に処理する傾向があります)、電話ブラウザーでは正しく補正されません。したがって、予測できないエラーが発生します。
  4. 外部ファイルが正しい順序でリンクされていません。(このリストの2.も当てはまらない限り、あなたには当てはまらないようです)。
  5. にコンテンツがないため、ブラウザは正しくレンダリングしていません.ui-content。(繰り返しますが、可能性は低いですが、いくつか追加してみて、Lorem Ipsumそれが修正されるかどうかを確認してください)。

上記のいずれにも当てはまらない場合は、jquery.mobile のあいまいなバグに触れているか、何らかの方法で明らかにした他の非常に具体的な問題があります。どちらの場合も、それを修正するカスタム css を追加できます (おそらくメディア クエリ内でこれを使用するのが賢明でしょう)。

次のいずれかが機能します。

.ui-navbar ul {
               white-space:pre-wrap;
              }
// The above introduces a margin that may not be acceptable
.ui-navbar .ui-btn-inner, .ui-navbar .ui-btn-text {
               font-size:12px /* or something else that works */ !important;
 }
// The above may look too small
.ui-navbar li {
                max-width:33%;
               }

上記のすべてがさまざまなデバイスで問題を引き起こす可能性があるため、コードをデバッグして原因を突き止めることをお勧めします。jquery.mobile の最新バージョンでは、ビジュアル ナビゲーション バーに関連するすべてのバグが修正されていると主張しているため、これは発生しないはずです。見るためのコンテキストとして、予期しない視覚的な欠陥を引き起こす可能性のある微妙なエラーの数が多いことを覚えておいてください. これはおそらく、他のほとんどのフレームワークよりも jquery.mobile に当てはまります。なぜなら、JavaScript はページのスタイリングに非常に頻繁に使用されているからです。ただし、多くの作業や、コードの書き直し/ハッキングが必要になる可能性は低いです。理解すれば、それは明白で単純なはずです。

于 2013-05-20T16:04:01.987 に答える