jQuery Mobile 'da yanlış sayfa yüksekliği

jQuery Mobile 1.2.0 kullanarak bir web uygulaması geliştiriyorum ve sayfa yüksekliği iOS ve Android'de doğru hesaplanıyor ancak sayfanın alt kısmında bir boşluğu olan Windows Phone'da değil .jQuery Mobile 'da yanlış sayfa yüksekliği

Yalnızca CSS ile nasıl düzeltebilirim?

<!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>

kaynak

2012-10-23 Diogo Cardoso

Yükseklik ve genişlik bulmak için farklı yollar bulacaksınız. [screen-on-windows-phone-7-series] (http://stackoverflow.com/questions/2596732/how-to-get-screen-size-on-windows-phone-7-series) –

Bu bilinen bir sorundur. CSS ile vücut için min yüksekliğini (sadece portre modu) kodlayabilir veya aşağıdakileri yapabilirsiniz.

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'); 

}

Windows Phone üzerinde

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

8 aşağıdaki Sergei cevap @

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

kaynak

2012-10-24 19:40:12

kullanabilirsiniz: düzeltme ilk sayfa için çalıştı , ama benim diğer ana sayfalar sabit altbilgi hangi hala beyaz bir alanın üzerinde "yüzen".

gerçi "sınıfı ile, sayfa değişikliği tekrar kod çalıştırmasına ve vücudun değiştirmeye çalışmış

(altbilgi ekranın ortasına biraz üzerinde konumlandırılmış) önce kesinlikle daha az boşluk olan ui-cep telefonuna viewport ", yükseklik ama işe yaramadı.

Yardım edersiniz. Teşekkür ederiz!

kaynak

2013-02-13 16:59:33

paylaşım jsfiddle üzerinde çalışma sayfası + css çalışmıyor –

jQuery Mobile 'da yanlış sayfa yüksekliği

cevap

İlgili konular