Falsche Seitenhöhe in jQuery Mobile

Ich entwickle eine Webanwendung mit jQuery Mobile 1.2.0 und die Seitenhöhe wird korrekt auf iOS und Android berechnet, aber nicht auf Windows Phone, das eine Lücke am unteren Rand der Seite hat .Falsche Seitenhöhe in jQuery Mobile

Irgendeine Idee, wie ich es beheben kann, vorzugsweise nur mit 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>

Quelle

2012-10-23 Diogo Cardoso

Sie finden verschiedene Möglichkeiten, um Höhe und Breite zu finden.Überprüfen Sie dies. [screen-size-on-windows-phone-7-series] (http://stackoverflow.com/questions/2596732/how-to-get-screen-size-on-windows-phone-7-series) –

Dies ist ein bekanntes Problem. Sie können die Mindesthöhe für den Körper per CSS (nur im Hochformat) fest codieren oder folgendermaßen vorgehen.

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

auf Windows Phone 8 können Sie die folgenden

@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; 
    } 
}

Quelle

2012-10-24 19:40:12

@ Sergei Antwort benutzen: Das Update für meine erste Seite gearbeitet, aber meine anderen Hauptseiten haben feste Fußzeilen die "schweben" immer noch über einem Leerraum.

Es ist auf jeden Fall weniger Leerraum vor, obwohl

(Fußzeilen leicht oberhalb der Mitte des Bildschirms positioniert)

Ich habe versucht, den Code erneut auf Seitenwechsel zu laufen und den Körper, mit Klasse „ui-Mobile- zu ändern Ansichtsfenster ", Höhe, aber es hat nicht funktioniert.

Ich hoffe, Sie können helfen. Danke!

Quelle

2013-02-13 16:59:33

teilen nicht funktionierende Seite + CSS auf jsfiddle –

Falsche Seitenhöhe in jQuery Mobile

Antwort

Verwandte Themen