Windows Phone 8 La pagina WebView non è statica (jQuery Mobile/PhoneGap)

Question

Ci scusiamo per il titolo ambiguo; tuttavia sto tentando di eseguire il porting della nostra applicazione PhoneGap che funziona perfettamente su Android e iOS su Windows Phone 8 (scritto in jQuery Mobile/JavaScript, HTML e CSS3).

La maggior parte ha funzionato (anche se ho dovuto cambiare un paio di bit ma era previsto). Uno dei problemi principali che sto riscontrando in questo momento è il funzionamento della lista a scorrimento della nostra applicazione e l'acquisizione della firma (entrambi credo siano correlati). Non sono troppo sicuro di dove si trova il problema, ma quando faccio scorrere/segno, l'intera pagina si muove con il dito e i singoli elementi non rilevano gli eventi tattili. Sto usando iScroll, jQuery 1.7.2 e jQM 1.1.0; tuttavia, continua a leggere perché la funzionalità di scorrimento era funzionante (la funzionalità di firma è sempre stata un problema)!

prima di scorrere smesso di lavorare, ho avuto un problema con il divario tra la barra piè di pagina e la parte inferiore della pagina:

Una cosa che mi è stato consigliato di fare era di aggiungere il seguente bit di CSS; ed è risolto il 'gap' problema:

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

Tuttavia, poi ha causato le caratteristiche di scorrimento a diventare non risponde. L'intera pagina si sposta su/giù ma non l'elemento della lista che è l'opposto di quello che voglio! Ho provato ad aggiungere il seguente, ma senza fortuna:

-ms-touch-action: none; 

Ho aggiunto questo al mio elemento div che contiene la pagina. Ha fermato la pagina andando su e giù! Tuttavia l'elenco è rimasto insensibile. Tuttavia, se rimuovo entrambe queste classi CSS, la funzionalità scroll funziona di nuovo, ma questo reintroduce il problema del divario. La classe CSS del viewport è sicuramente la strada corretta che io credo - ma non posso, per la vita di me, farlo funzionare nel modo in cui mi piacerebbe farlo.

Se qualcuno potesse aiutare, sarebbe molto apprezzato.

Grazie.

Answer 1

Prima di tutto, @ -ms-finestra non supporta lo zoom, in modo da rimuovere le proprietà di zoom perché generano errori di analisi. Le proprietà supportate sono elencate here

In secondo luogo, provare ad aggiungere queste regole al vostro CSS e utilizzare iScroll nel vostro contenitore centrale come hai detto che stavi facendo

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

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

Answer 2

è possibile utilizzare questo nel tuo css e risolverà il tuo footer.

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