1

jquery mobile 1.3.2 を使用して Worklight 6.0 で簡単なアプリケーションを作成しました。

これは、ヘッダー、コンテンツ、およびフッターを備えた単一ページのアプリケーションです。必要な jquery mobile javascript と css ファイルが含まれています。

以下は、アプリケーションの html ファイルです。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>DemoApp</title/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
        <link rel="shortcut icon" href="images/favicon.png"/>
        <link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
        <link rel="stylesheet" href="css/DemoApp.css"/>
        <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css"/>
        <script>window.$ = window.jQuery = WLJQ;</script>

    </head>
    <body id="content" style="display: none;">

        <div data-role="page">
            <div data-role="header"><h1>Header</h1></div>
            <div data-role="content">Content</div>
            <div data-role="footer" data-position="fixed"><h1>Footer</h1></div>
        </div>

        <script src="js/initOptions.js"></script>
        <script src="js/DemoApp.js"></script>
        <script src="js/messages.js"></script>
        <script src="js/jquery.mobile-1.3.2.min.js"></script>
    </body>
</html>

Windows Phone 8 環境を作成し、worklight プロジェクトをビルドしました。Microsoft Visual Studio Express 2012 for Windows Phone の助けを借りて、アプリケーションは Windows Phone エミュレーターで起動されます。

ここに画像の説明を入力

画面をスクロールすると、次の応答が返されます。

ここに画像の説明を入力 ここに画像の説明を入力

この問題を解決する方法を提案してください。

4

2 に答える 2

1

スクロール可能なコンテンツの間にヘッダー/フッターを固定したい場合は、次を試してください。

<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h3>Header</h3>
    </div>
    <div data-role="content">
       Content
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <h3>Footer</h3>
    </div>
</div>

タップトグル設定は、タップ時にヘッダー/フッターを非表示にすることを無効にすることですが、無効にしない限り、JQM固定ヘッダー/フッターをまったく動作させることができませんでした。

また、Windows Phone 8 では、フッターの位置が高すぎることがわかりました。したがって、CSS に以下を追加する必要があります。

@media screen and (orientation: portrait) {
 @-ms-viewport {
    width: 320px;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
 }
}
于 2013-09-26T14:21:56.277 に答える
0

DemoApp.css を使用しているアプリの CSS を教えてください。その中のデフォルトのcssを無効にして、もう一度実行してみてください。

問題は、画面サイズが実際のデバイスサイズよりも大きいと言われているcssにあるようです。

よろしく、エルヴィス

于 2013-09-26T12:35:45.340 に答える