0

jQuery Mobile を使用してIBM Worklightプラットフォームで PhoneGap/Cordova アプリを作成しようとしていますが、生成される出力に非常に奇妙な動作が見られます。

アプリのプレビューは、Eclipse とデスクトップ Web ブラウザーでは問題なく表示されますが、デバイスにデプロイすると、以下に示すように、divheaderとcontentdiv が画面上部の非常に小さなスペースに押し込まれているように見えます。

ここに画像の説明を入力

なぜこれが起こっているのか本当に途方に暮れています.Worklightフォーラムで尋ねましたが、そこの回答はどれも役に立ちませんでした.jQuery Mobileに固有の問題なのだろうか?

再現する手順：

  1. 新しいプロジェクトを作成する
  2. 以下に貼り付けたコードをコピーしてenter.html
  3. 以下に貼り付けたコードをコピーしてhome.html
  4. css/js ファイルの場所を微調整
  5. アプリのビルドとデプロイ
  6. スクリーンショットに示されているのと同じ動作を観察します

私はこれらのバージョンを実行しています:

  • IBM Worklight 5.0.1-299-developer-edition
  • jQuery 1.7.2 分
  • jQuery モバイル 1.1.1
  • エクリプス 3.7.2
  • デバイス: iPhone 4S、Samsung Galaxy S2 & Galaxy Ace、両方とも 2.3.3 を実行

body 要素と jQuery div 要素の両方が「コンテンツ」の id を使用しようとしている間に競合が発生する可能性はありますか?

enter.html

<!DOCTYPE html>     
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
        <title>Enter</title>
        <link rel="shortcut icon" href="images/favicon.png" />
        <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

        <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
    </head>
    <body onload="WL.Client.init({})" id="content" style="display: none">

        <div data-role="page" id="enterPage">

            <div data-role="header">
                <h1>AppHeaderHere</h1>
            </div><!-- /header -->

            <div data-role="content">
                <h4 id="eventId">body here</h4>
                <p>

                <a href="home.html" data-role="button">Enter</a>

                Some filler text here, this would be the actual body content
                </p>
            </div><!-- /content -->

            <div data-role="footer" data-position="fixed">
                <h4>Footer here</h4>
            </div>

        </div><!-- /page -->

        <script src="js/MyApp.js"></script>
        <script src="js/messages.js"></script>
        <script src="js/auth.js"></script>
        <script src="js/jquery/jquery-1.7.2.min.js"></script>
        <script src="js/jquery/jquery.mobile-1.1.1.js"></script>
    </body>
</html>

home.html

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Home</title> 
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />    
    </head> 
    <body onload="WL.Client.init({})"  id="content" style="display: none"> 

        <div data-role="page" id="homePage">

            <div data-role="header">
                <h1>Home</h1>
            </div><!-- /header -->

            <div data-role="content">
                <h4 id="eventId">Some header</h4>
                <p>
                Body content goes here
                </p>
            </div><!-- /content -->

            <div data-role="footer" data-id="foo1" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="home.html" class="ui-btn-active">Home</a></li>
                        <li><a href="page1.html">page1</a></li>
                        <li><a href="page2.html">page2</a></li>
                        <li><a href="page3.html">page3</a></li>
                        <li><a href="page4.html">page4</a></li>
                    </ul>
                </div>
            </div>

        </div><!-- /page -->

        <script src="js/MyApp.js"></script>
        <script src="js/messages.js"></script>
        <script src="js/auth.js"></script>
        <script src="js/jquery/jquery-1.7.2.min.js"></script>
        <script src="js/jquery/jquery.mobile-1.1.1.js"></script>
    </body>
</html>
4

1 に答える 1

1

使用しているプレビューは、HTML 本文の CSS をオンザフライで変更しています。そこにバグがあります。

Firebug または同様のツールを使用すると、jQuery Mobile CSS を覆す高さ auto が body に与えられることがわかります。インライン CSS をコメントアウトするだけで機能します。

于 2012-08-05T06:46:25.867 に答える