jQuery मोबाइल में गलत पृष्ठ ऊंचाई

मैं jQuery मोबाइल 1.2.0 का उपयोग कर एक वेब एप्लिकेशन विकसित कर रहा हूं और पृष्ठ की ऊंचाई आईओएस और एंड्रॉइड पर सही ढंग से गणना की जा रही है लेकिन विंडोज फोन पर नहीं, जिसकी पृष्ठ के नीचे एक अंतर है ।jQuery मोबाइल में गलत पृष्ठ ऊंचाई

कोई विचार यह है कि मैं इसे कैसे ठीक कर सकता हूं, अधिमानतः केवल सीएसएस के साथ?

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

स्रोत

2012-10-23 Diogo Cardoso

आपको ऊंचाई और चौड़ाई खोजने के विभिन्न तरीके मिलेंगे। इसे चेक करें। [स्क्रीन-साइज-ऑन-विंडोज-फोन -7-सीरीज़] (http://stackoverflow.com/questions/2596732/how-to-get-screen-size-on-windows-phone-7-series) –

यह एक ज्ञात मुद्दा है। आप शरीर के लिए सीएसएस (केवल पोर्ट्रेट मोड) के माध्यम से न्यूनतम ऊंचाई को हार्डकोड कर सकते हैं या निम्न कार्य कर सकते हैं।

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

विंडोज फोन 8 आप निम्नलिखित

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

स्रोत

2012-10-24 19:40:12

@ सर्गेई के जवाब का उपयोग कर सकते हैं: ठीक मेरे प्रथम पृष्ठ के लिए काम किया है, लेकिन मेरे अन्य मुख्य पृष्ठों तय कर दी है पाद जो एक सफेद जगह के ऊपर अभी भी "तैर रहे" हैं।

यह निश्चित रूप से कम सफेद स्थान से पहले हालांकि

मैं वर्ग के साथ पेज परिवर्तन पर फिर से कोड को चलाने के लिए और शरीर की बदलना चाहते हैं, की कोशिश की "(पाद स्क्रीन के बीच से थोड़ा ऊपर तैनात) है ui-मोबाइल के व्यूपोर्ट ", ऊंचाई लेकिन यह काम नहीं किया।

आशा है कि आप कर सकते हैं। धन्यवाद!

स्रोत

2013-02-13 16:59:33

शेयर jsfiddle पर पेज + सीएसएस काम नहीं कर रहा है –

उत्तर

संबंधित मुद्दे