Niepoprawna wysokość strony w jQuery Mobile

Zajmuję się tworzeniem aplikacji internetowej przy użyciu jQuery Mobile 1.2.0, a wysokość strony jest obliczana poprawnie w systemie iOS i Android, ale nie w systemie Windows Phone, który ma lukę na dole strony .Niepoprawna wysokość strony w jQuery Mobile

Każdy pomysł, jak to naprawić, najlepiej tylko przy użyciu 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>

Źródło

2012-10-23 Diogo Cardoso

znajdziesz różne sposoby na znalezienie wysokości i szerokości. Sprawdź to. [rozmiar ekranu na oknach-telefon-7-series] (http://stackoverflow.com/questions/2596732/how-to-get-screen-size-on-windows-phone-7-series) –

Jest to znany problem. Możesz kodować minimalną wysokość ciała za pomocą CSS (tylko tryb portretowy) lub wykonaj następujące czynności.

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

na Windows Phone 8 można użyć następujących

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

Źródło

2012-10-24 19:40:12

@ odpowiedź Siergieja: Rozwiązaniem pracował dla mojej pierwszej stronie, ale moje inne główne strony ustaliły stopek, które nadal "unoszą się" nad białą przestrzenią.

Jest zdecydowanie mniej spacje przed chociaż (stopki umieszczony nieco powyżej środka ekranu)

próbowałem ponownie uruchomić kod na zmianę widoku i zmienić ciało użytkownika, z klasą „ui-MOBILNE rzutnia ", wysokość, ale to nie zadziałało.

Mam nadzieję, że możesz pomóc. Dziękujemy!

Źródło

2013-02-13 16:59:33

udostępnij nie działa strona + css na jsfiddle –

Niepoprawna wysokość strony w jQuery Mobile

Odpowiedz

Powiązane problemy