Windows Phone 8のWebViewページは静的ではありません（jQuery Mobile/PhoneGap）

Question

あいまいなタイトルの謝罪です。しかし私はAndroidとiOS上でWindows Phone 8（jQuery Mobile/JavaScript、HTMLとCSS3で書かれています）にうまくいきますPhoneGapアプリケーションを移植しようとしています。

ほとんどの部分が機能しました（ただし、2,3ビットを変更する必要がありましたが、これは予想されていました）。私が現時点で抱えている主な問題の1つは、アプリケーションのスクロールリスト機能が機能していることと、シグネチャキャプチャ（両方とも関連していると信じています）です。私は問題がどこにあるのかは分かりませんが、スクロール/サインすると、ページ全体が指で動いていて、個々の要素がタッチイベントを受け取っていません。私はiScroll、jQuery 1.7.2およびjQM 1.1.0を使用しています。ただし、スクロール機能がであったため、読み込みを続行しました（署名機能は常に問題でした）！私はフッターバーやページの底部との間のギャップの問題を抱えていた、動作を停止スクロールする前に

：私が行うことをお勧めして

ことの一つは、以下のビットを追加しましたCSSのそれはその後、スクロール機能が応答しなくなった原因、しかし

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

：それは「ギャップ」問題を解決しました。ページ全体が上下に動いていますが、私が望むのと反対のリスト要素はありません！私は以下を追加しようとしましたが、運がありません：

-ms-touch-action: none; 

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

誰かが助けてくれれば、大変感謝しています。

ありがとうございました。

Answer 1

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

第二に列挙されている、あなたのCSSに、このルールを追加し、あなたが

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

body { 
    overflow: hidden; 
    -ms-user-select: none; 
    -ms-content-zooming: none; 
    -ms-touch-action: none; 
} 

Answer 2

これはあなたのCSSで使用でき、フッターが修正されます。

[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}