क्या मैं प्लेटफॉर्म-तटस्थ तरीके से नो-यूआरएल-बार मोबाइल सफारी विंडो ऊंचाई पूछ सकता हूं?

Question

मैं एक छोटा सा स्क्रॉलिंग टेक्स्ट रीडर विजेट लिख रहा हूं जो आपको आईफोन ऐप स्टोर में मिलता है, जहां एक ऐप के लिए स्क्रीनशॉट का पैनल मुख्य लंबवत-स्क्रॉलिंग पैनल के भीतर एम्बेडेड यह अलग, क्षैतिज-स्क्रॉलिंग पैनल है।

सभी संस्करणों में (पूर्ण रिज़ॉल्यूशन कुंजीपटल/माउस कंप्यूटर शैली सहित) पैनल, कंटेनर की चौड़ाई के 100% तक ले जाता है तो यह पेज भर में एक क्षैतिज पट्टी की तरह है।

छोटे-रिज़ॉल्यूशन टच इंटरफेस संस्करण में, अर्थात स्मार्टफ़ोन के लिए, मैं यह भी खिड़की की पूरी ऊंचाई होने के लिए इतना है कि जब आप इसे करने के लिए खड़ी स्क्रॉल, यह पूर्ण स्क्रीन तक लग सकते हैं आकार बदलने के लिए चाहते हैं।

आईफोन यह मुश्किल बनाता है क्योंकि $ (विंडो) .height() या फिर आप यह पूछना चाहते हैं कि यूआरएल बार दिखाई दे रहा है या नहीं।

कोड को विशेष रूप से आवरण के बिना यह पता लगाने के लिए कि क्या यह आईफोन पर है या यूआरएल बार बंद करने के लिए विंडो को स्क्रॉल करने के लिए हैक में जोड़ना और फिर ऊंचाई पूछना, सफारी मोबाइल से पूछने का कोई तरीका है, "क्या है खिड़की की ऊंचाई "जो मेरे 3 जीएस पर, 416 का उत्तर देगी, भले ही यूआरएल बार वर्तमान में दिखाई दे या नहीं?

मैं सभी प्रमुख स्मार्टफोनों के लिए पूछने के लिए एक मंच-तटस्थ तरीका खोजना चाहता हूं, "मैं इस पैनल को किस ऊंचाई पर सेट कर सकता हूं ताकि जब आप इसे स्क्रॉल करते हैं, तो यह पूरी ब्राउज़र विंडो भरता है?"

धन्यवाद, थोड़ी देर के लिए इसके खिलाफ मेरा सिर मार रहा है और पहले से ही यहां पर खोद गया है और यह विशिष्ट जानकारी नहीं मिल सका।

Answer 1

मैं भी इसका समाधान ढूंढ रहा था। कोई सफलता नहीं। मैं एक हैक के साथ समाप्त हुआ जैसे आप वास्तव में बचाना चाहते थे। लेकिन वहाँ के रूप में कोई अन्य समाधान के आसपास हो रहा है, मैंने सोचा कि मैं यहाँ विवरण छोड़:

मेरे मामले में पेज लेकिन एक छवि के साथ एक परत कुछ भी नहीं है कि के रूप में व्यूपोर्ट की अनुमति देता है के रूप में बड़ा होना चाहिए, मूल रखते हुए आस्पेक्ट अनुपात। तो मैं एक समारोह मैं लोड और oriantation-परिवर्तन पर फोन है और यह इस प्रकार है:

function updateImgLayer() { 
    $('#imgLayer img').hide(); // to prevent flickering 
    $('#imgLayer').height("5000px"); // to be sure it's bigger then the viewport  

    // timeout of zero ms makes sure layer-resize is finished in mobile-safari 
    // the android-browser seems to need more time – set it to 300 ms there. 
    setTimeout(function() { 
     window.scrollTo(0, 1); // scroll the url-bar out 

     $('#imgLayer').height(window.innerHeight + "px"); 

     var imgH = $('#imgLayer .height').text(); // wrote img-dimensions in there by php 

     // the rest is to scale the image 
     var imgW = $('#imgLayer .width').text(); 
     var winH = window.innerHeight; 
     var winW = $(window).width(); 

     if((imgH/imgW) > (winH/winW)) { 
      $('#imgLayer img').css({ top: "0px", width: "auto", height: $('#imgLayer').height() + "px" }); 
     } else { 
      $('#imgLayer img').width($('#imgLayer').width() + "px"); 
      var cImgH = ($('#imgLayer').width()/imgW) * imgH; 
      var top = $('#imgLayer').height()/2 - cImgH/2; 
      $('#imgLayer img').css({ top: top+"px", height: "auto" }); 
     } 

     $('#imgLayer img').fadeIn(200); 

}, (android?300:0)); 

}