windows phone 8 HTML5 viewport è più alto dello schermo dopo l'aggiornamento a 8.0.10328.78

Question

Sto sviluppando un'applicazione Cordova esistente che voglio portare a Windows Phone 8. Dopo aver applicato alcune correzioni per gradienti e il problema del viewport tutto sembrava lavorare. Ieri ho aggiornato il mio telefono (Lumia 520) a una versione più recente (8.0.10328.78) e improvvisamente il footer fisso è in parte esterno all'area visibile dello schermo.

Ho ridotto il codice il più possibile e ho applicato ogni variazione delle correzioni di larghezza del dispositivo/altezza del dispositivo che ho trovato.

Il caso più semplice appare anche nel campione app HTML5 se si aggiunge solo

<div style="position: fixed; bottom:0; left:0; right:0; background-color: red; height:30px;">footer</div> 

ad esso. Puoi vedere solo i primi 10 pixel, a meno che non scorri verso il basso. Inoltre, non è come se il piè di pagina non fosse corretto, perché se si crea una pagina molto lunga (più lunghezze dello schermo) il piè di pagina rimarrà nello stesso punto (circa 20 pixel fuori dalla vista, finché non si scorrerà completamente verso il basso) Se scorri verso il basso completamente i 20 pixel superiori dell'intestazione saranno nascosti.

L'applicazione di esempio ha già il

@-ms-viewport{ width: 320px; } 

in esso per impostazione predefinita. Ma in realtà il problema che sto vedendo ora è diverso da quello che è stato risolto aggiungendolo. (. Nel vecchio caso, si dovrebbe vedere il piè di pagina che fluttuavano 20pixels sopra il fondo, ma anche quando la sezione di MS-finestra viene rimosso, che non accada più)

Inoltre ho fatto un paio di misure:

window.screen.height => 800 
window.innerHeight => 512 
window.outerHeight => 512 
$(window).height() => 533 

Answer 1

Ho riscontrato questo problema anche in un'app Cordova/PhoneGap. Vedo persino il problema nelle app HTML5 di Windows Phone 8 quando non utilizzo PhoneGap (è sufficiente creare un nuovo progetto in Visual Studio 2012 da "Modelli -> Visual C# -> App per Windows Phone HTML5"). Questo problema non si verifica se stai caricando lo stesso codice HTML5 da un sito ospitato utilizzando l'app IE su Windows Phone 8.

L'unica cosa che ho trovato per far funzionare correttamente la finestra è nascondere la barra delle applicazioni .

In cambio MainPage.xaml

shell:SystemTray.IsVisible="True" 

a

shell:SystemTray.IsVisible="False" 

Questo nasconde la barra di sistema e rende la vostra applicazione un'applicazione a schermo intero.

Per qualche motivo quando l'app è a schermo intero, il viewport si comporta come previsto.

Answer 2

vecchia questione, ma, a partire dal gennaio 2015 e per quanto ne so per Lumia 520 + WP8.1,

<preference name="fullscreen" value="true"/> 

in config.xml fa il trucco, lasciando vassoio di sistema al suo posto. Puoi inserirlo nelle specifiche della piattaforma

<platform name="wp8"> 
    <preference name="fullscreen" value="true"/> 
</platform>