100% ऊंचाई

Question

के साथ आईफोन पता बार छुपाएं इस पर कई पोस्ट, लेकिन मेरी स्थिति के लिए काफी नहीं। मेरे पृष्ठ में लचीला आयाम 100% चौड़ाई और 100% ऊंचाई पर सेट है, इसलिए सामान्य ऑन-लोड स्क्रॉल फ़ंक्शन काम नहीं कर रहा है। कोई विचार या अन्य समाधान?

धन्यवाद!

सीएसएस:

* { 
    margin:0; 
    padding:0; 
} 
html, body { 
    width:100%; 
    height:100%; 
    min-width:960px; 
    overflow:hidden; 
} 

जावास्क्रिप्ट:

/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function() { 
    window.scrollTo(0, 1); 
    }, 1000);​ 

Answer 1

मैं भी इस के साथ संघर्ष किया। शुरुआत में मैंने एक सीएसएस क्लास (.stretch) को 200% ऊंचाई और ओवरफ़्लो दृश्यमान परिभाषित करने की कोशिश की, फिर स्क्रॉल के पहले और बाद में स्क्रिप्ट के माध्यम से HTML पर इसे टॉगल कर दिया। यह काम नहीं करता है क्योंकि गणना की गई 100% ऊंचाई सभी व्यूपोर्ट आयामों को कम से कम सभी ब्राउज़र क्रोम से घटाती है (स्टेटस बार को जगह में वापस स्नैप करना)।

अंततः मैं डोम एपीआई के माध्यम से गतिशील रूप से लागू करने के लिए विशिष्ट शैली का अनुरोध करने के लिए किया था। आपके अतिरिक्त टुकड़ा करने के लिए जोड़ने के लिए:

var CSS = document.documentElement.style; 

/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function() { 
    CSS.height = '200%'; 
    CSS.overflow = 'visible'; 

    window.scrollTo(0, 1); 

    CSS.height = window.innerHeight + 'px'; 
    CSS.overflow = 'hidden'; 
}, 1000);​ 

हालांकि मैं विस्तार स्कॉट Jehl की विधि है, जो नाबालिग Android/iOS सफारी scrollTo मतभेद को संबोधित करने की सलाह देते हैं:

https://gist.github.com/1183357

Answer 2

नैट स्मिथ से यह समाधान मुझे मदद की : How to Hide the Address Bar in a Full Screen Iphone or Android Web App।

यहाँ आवश्यक सा है:

var page = document.getElementById('page'), 
    ua  = navigator.userAgent, 
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'); 

var setupScroll = window.onload = function() { 
    // Start out by adding the height of the location bar to the width, so that 
    // we can scroll past it 
    if (ios) { 
    // iOS reliably returns the innerWindow size for documentElement.clientHeight 
    // but window.innerHeight is sometimes the wrong value after rotating 
    // the orientation 
    var height = document.documentElement.clientHeight; 
    // Only add extra padding to the height on iphone/ipod, since the ipad 
    // browser doesn't scroll off the location bar. 
    if (iphone && !fullscreen) height += 60; 
    page.style.height = height + 'px'; 
    } 
    // Scroll after a timeout, since iOS will scroll to the top of the page 
    // after it fires the onload event 
    setTimeout(scrollTo, 0, 0, 1); 
}; 

अधिक जानकारी के लिए, अपने blog post या Gist की जाँच करें।