मोबाइल सफारी $ (विंडो) .height() यूआरएल बार विसंगति

Question

मैं एक निश्चित div सेट करने की कोशिश कर रहा हूं जो खिड़की की ऊंचाई 100% है। लेकिन मोबाइल सफारी सही खिड़की की ऊंचाई का पता नहीं लगाता है। यह हमेशा सोचता है कि यूआरएल बार समीकरण का हिस्सा है।

यही वह है जो मैं वर्तमान में उपयोग कर रहा हूं लेकिन यह यूआरएल बार के लिए जिम्मेदार नहीं है। मोबाइल सफारी केवल ब्राउज़र आप इस मुद्दे को दे रही है

$(function(){ 
    $(document).ready(function(){ // On load 
     alert($.browser); 
     $('#right-sidebar').css({'height':(($(window).height()))+'px'}); 
    }); 
    $(window).resize(function(){ // On resize 
     $('#right-sidebar').css({'height':(($(window).height()))+'px'}); 
    }); 
}); 

Answer 1

, तो आप हमेशा कि ब्राउज़र विशेष रूप से और शून्य से अपनी कुल ऊंचाई से URL बार ऊंचाई लक्षित कर सकते हैं। आप ट्रेल और त्रुटि से यूआरएल बार की ऊंचाई पा सकते हैं, मुझे नहीं पता कि यह कितना लंबा है

Answer 2

यहां बताया गया है कि मैंने इसे कैसे समझा। यह एक दो कदम प्रक्रिया है।

चरण 1 - यह देखने के लिए जांचें कि डिवाइस आईफोन या आईपॉड है या नहीं।

चरण 2 - यह तो देखने के लिए जाँच रहा है, तो अगर ब्राउज़र सफारी जब भी मोबाइल सफारी विशिष्ट कोड निष्पादित करने के लिए आवश्यक

// On document ready set the div height to window 
$(document).ready(function(){ 

    // Assign a variable for the application being used 
    var nVer = navigator.appVersion; 
    // Assign a variable for the device being used 
    var nAgt = navigator.userAgent; 
    var nameOffset,verOffset,ix; 


    // First check to see if the platform is an iPhone or iPod 
    if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){ 
     // In Safari, the true version is after "Safari" 
     if ((verOffset=nAgt.indexOf('Safari'))!=-1) { 
      // Set a variable to use later 
      var mobileSafari = 'Safari'; 
     } 
    } 

    // If is mobile Safari set window height +60 
    if (mobileSafari == 'Safari') { 
     // Height + 60px 
     $('#right-sidebar').css('height',(($(window).height()) + 60)+'px'); 
    } else { 
     // Else use the default window height 
     $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'}); 
    }; 


}); 

// On window resize run through the sizing again 
$(window).resize(function(){ 
    // If is mobile Safari set window height +60 
    if (mobileSafari == 'Safari') { 
     // Height + 60px 
     $('#right-sidebar').css('height',(($(window).height()) + 60)+'px'); 
    } else { 
     // Else use the default window height 
     $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'}); 
    }; 
}); 

फिर MobileSafari चर का उपयोग है।

डिवाइस से शुरू करने से पहले आईपैड और डेस्कटॉप इत्यादि का नियम होता है जो सफारी भी चला सकते हैं। फिर दूसरा चरण क्रोम और अन्य ब्राउज़रों को इंगित करता है जो संभावित रूप से इन उपकरणों पर चल सकते हैं। http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution

Answer 3

यह jQuery के .height() विधि में एक बग की वजह से है -

यहाँ कारण है कि मैं इसे इस तरह से किया था की गहराई में और अधिक टूटने है।

var height = window.innerHeight ? window.innerHeight : $(window).height(); 
$('#right-sidebar').height(height); 

मैं ज्यादातर का कहना है के रूप में इस शुरू कर देंगे:

$('#right-sidebar').height(window.innerHeight); 

सुनिश्चित करें कि आप ज्यादातर पार ब्राउज़र संगत आप ऐसा कर सकते हैं बनाने के लिए:

सही ऊंचाई आप उपयोग कर सकते हैं प्राप्त करने के लिए यदि नीचे स्क्रॉल बार है तो मजाकिया व्यवहार करें।

Answer 4

Tldr

तुम सिर्फ खिड़की ऊंचाई, क्रॉस-ब्राउज़र क्वेरी करने के लिए, और यह के साथ किया जा, jQuery.documentSize का उपयोग करें और $.windowHeight() फोन चाहते हैं। अपने स्वयं के समाधान को लागू करने के लिए, पढ़ें।

jQuery का उपयोग कब करें या दस्तावेज़

jQuery के $(window).height() की clientHeightdocument.documentElement.clientHeight के लिए एक आवरण है। ब्राउज़र स्क्रॉल बार द्वारा कवर की गई जगह को छोड़कर, यह आपको व्यूपोर्ट की ऊंचाई देता है। आम तौर पर, यह ठीक काम करता है और निकट-सार्वभौमिक ब्राउज़र समर्थन का आनंद लेता है। लेकिन quirks on mobile, and in iOS in particular हैं।

• आईओएस में, वापसी मान दिखावा जो URL और टैब सलाखों दिखाई दे रहे हैं, भले ही वे नहीं हैं। जैसे ही उपयोगकर्ता स्क्रॉल करता है और ब्राउजर न्यूनतम UI पर स्विच करता है, वे छिप जाते हैं।प्रक्रिया में लगभग 60px की खिड़की की ऊंचाई में वृद्धि हुई है, और यह clientHeight (या jQuery में) में दिखाई देता है।

• clientHeightlayout viewport, not the visual viewport का आकार देता है, और इसलिए ज़ूम स्थिति को प्रतिबिंबित नहीं करता है।

तो ... मोबाइल पर इतना अच्छा नहीं है।

जब window.innerHeight

उपयोग करने के लिए एक और संपत्ति आप क्वेरी कर सकता है: window.innerHeight। यह

• खिड़की ऊंचाई देता है,
• दृश्य व्यूपोर्ट पर आधारित है, यानी ज़ूम स्थिति को दर्शाता है,
• अद्यतन किया जाता है जब ब्राउज़र न्यूनतम यूआई (मोबाइल सफारी) में प्रवेश करती है,
• लेकिन इसमें स्क्रॉल बार द्वारा कवर क्षेत्र शामिल है।

अंतिम बिंदु का अर्थ है कि आप इसे प्रतिस्थापन के रूप में नहीं छोड़ सकते हैं। साथ ही, यह IE8 में समर्थित नहीं है, और फ़ायरफ़ॉक्स prior to FF25 (अक्टूबर 2013) में टूटा हुआ है।

लेकिन इसका उपयोग मोबाइल पर प्रतिस्थापन के रूप में किया जा सकता है क्योंकि मोबाइल ब्राउज़र एक अस्थायी ओवरले के रूप में स्क्रॉल बार प्रस्तुत करते हैं जो व्यूपोर्ट में स्थान नहीं लेते हैं - window.innerHeight और d.dE.clientHeight उस संबंध में वही मान लौटाते हैं।

पार ब्राउज़र समाधान

तो एक क्रॉस-ब्राउज़र समाधान, वास्तविक खिड़की ऊंचाई जानने के लिए, यह (छद्म कोड) की तरह काम करता है:

IF the size of browser scroll bars is 0 (overlay) 
    RETURN window.innerHeight 
ELSE 
    RETURN document.documentElement.clientHeight 

यहाँ पकड़ कैसे करने के लिए है किसी दिए गए ब्राउज़र के लिए स्क्रॉल बार के आकार (चौड़ाई) को निर्धारित करें। आपको इसके लिए एक परीक्षण चलाने की जरूरत है। यह विशेष रूप से कठिन नहीं है - यदि आप चाहें तो my implementation here या original one by Ben Alman पर नज़र डालें।

यदि आप अपना खुद का रोल नहीं करना चाहते हैं, तो आप मेरा एक घटक भी उपयोग कर सकते हैं - jQuery.documentSize - और $.windowHeight() call के साथ किया जाना चाहिए।