10

あいまいなタイトルで申し訳ありません。ただし、Android と iOS で正常に動作する PhoneGap アプリケーションを Windows Phone 8 (jQuery Mobile/JavaScript、HTML、および CSS3 で記述) に移植しようとしています。

その大部分はうまくいきました（いくつかのビットを変更する必要がありましたが、それは予想されていました）。現時点で私が抱えている大きな問題の 1 つは、アプリケーションのスクロール リスト機能と署名キャプチャ (どちらも関連していると思われます) を動作させることです。問題がどこにあるのかよくわかりませんが、スクロール/署名すると、ページ全体が指で移動し、個々の要素がタッチイベントを取得しません。iScroll、jQuery 1.7.2、および jQM 1.1.0 を使用しています。ただし、スクロール機能は機能していたので読み続けてください (署名機能は常に問題でした)。

スクロールが機能しなくなる前に、フッター バーとページの下部の間のギャップに問題がありました。

jQuery モバイル ギャップ

私がアドバイスされたことの 1 つは、次の CSS を追加することでした。そして、「ギャップ」の問題を解決しました：

@media screen and (orientation: portrait) {
    @-ms-viewport {
        width: 320px;
        user-zoom: fixed;
        max-zoom: 1;
        min-zoom: 1;
    }
}

jQuery モバイル ギャップの修正

ただし、スクロール機能が応答しなくなりました。ページ全体が上下に移動しますが、私が望むものとは反対のリスト要素は移動しません! 私は以下を追加しようとしましたが、運がありません:

-ms-touch-action: none;

これを、ページを含む div 要素に追加しました。ページが上下に動くのを止めました！ただし、リストは応答しませんでした。ただし、これら両方の CSS クラスを削除すると、スクロール機能は再び機能しますが、ギャップの問題が再び発生します。ビューポート CSS クラスは間違いなく正しいルートだと思いますが、私の人生では、思い通りに動作させることはできません。

誰かが助けてくれれば、それは大歓迎です。

ありがとう。

4

2 に答える 2

4

まず、@-ms-viewport はズームをサポートしていないため、ズーム プロパティを削除します。解析エラーが発生するためです。サポートされているプロパティはここにリストされています

次に、このルールを CSS に追加し、中央のコンテナーで iScroll を使用してみてください。

@-ms-viewport{width:device-width;}

body {
  overflow: hidden;
  -ms-user-select: none;
  -ms-content-zooming: none;
  -ms-touch-action: none;
}
于 2013-09-23T08:51:39.487 に答える
1

これを CSS で使用すると、フッターが修正されます。

[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}
于 2013-09-02T11:03:40.593 に答える