Altezza pagina errata in jQuery Mobile

Sto sviluppando un'applicazione Web utilizzando jQuery Mobile 1.2.0 e l'altezza della pagina viene calcolata correttamente su iOS e Android ma non su Windows Phone, che presenta una lacuna nella parte inferiore della pagina .Altezza pagina errata in jQuery Mobile

Qualche idea su come posso risolvere il problema, preferibilmente solo con i CSS?

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Hello World jQuery Mobile</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /></script> 
     <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> 
     <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script> 
    </head> 
    <body> 
     <div data-role="page" style="background:green"> 
      <div data-role="header"> 
       <h1>Page Title</h1> 
      </div> 
      <div data-role="content"> 
       <p>Page content goes here.</p> 
      </div> 
      <div data-role="footer"> 
       <h4>Page Footer</h4> 
      </div> 
     </div> 
    </body> 
</html>

fonte

2012-10-23 Diogo Cardoso

troverai diversi modi per trovare altezza e larghezza. [screen-size-on-windows-phone-7-series] (http://stackoverflow.com/questions/2596732/how-to-get-screen-size-on-windows-phone-7-series) –

Questo è un problema noto. È possibile impostare l'altezza minima del corpo tramite CSS (solo modalità verticale) o effettuare le seguenti operazioni.

function bodyMinHeightFix() { 
    var isWp7 = window.navigator.userAgent.indexOf("IEMobile/9.0") != -1; 

    if (!isWp7) return; 

    // portrait mode only 
    if(window.innerHeight <= window.innerWidth) return; 

    var zoomFactorW = document.body.clientWidth/screen.availWidth; 

    // default value (web browser app) 
    var addrBarH = 72; 

    // no app bar in web view control 
    if (typeof window.external.Notify !== "undefined") { 
     addrBarH = 0; 
    } 

    var divHeightInDoc = (screen.availHeight-addrBarH) * zoomFactorW; 
    //$("body")[0].style.minHeight = divHeightInDoc + 'px'; 

    var page = $("div[data-role='page']"); 
    if (page.length > 0) 
     page[0].style.setProperty("min-height", divHeightInDoc + "px", 'important'); 

}

https://github.com/sgrebnov/jqmobile-metro-theme/blob/master/themes/metro/jquery.mobile.metro.theme.init.js

In Windows Phone 8 è possibile utilizzare il seguente

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

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

fonte

2012-10-24 19:40:12

@ risposta di Sergei: La correzione ha lavorato per la mia prima pagina, ma le mie altre pagine principali sono fissi piè di pagina che stanno ancora "fluttuando" sopra uno spazio bianco.

E 'sicuramente meno spazio bianco prima però (piè di pagina posizionati leggermente sopra il centro dello schermo)

ho cercato di eseguire il codice di nuovo sul cambio pagina e per modificare il corpo di, con classe "ui-Mobile- viewport ", altezza ma non ha funzionato.

Spero che tu possa aiutare. Grazie!

fonte

2013-02-13 16:59:33

condividi pagina non funzionante + css su jsfiddle –

Altezza pagina errata in jQuery Mobile

risposta

Problemi correlati