एंड्रॉइड ओएस कीबोर्ड वेबसाइट सामग्री ऊपर ले जाता है?

Question

मेरे पास 4 तत्वों वाली एक मोबाइल वेबसाइट है जो पूरी तरह से 100% ऊंचाई div के अंदर स्थित है और जब मैं यूआरएल बार पर क्लिक करता हूं तो div पर ऊंचाई बढ़ जाती है और सब कुछ धक्का देता है।

क्या इस मुद्दे को ठीक करने के लिए वैसे भी है? या इसे 100% बदलने से रोकें? या मुझे जेएस का उपयोग करके स्क्रीन आकार प्राप्त करने की आवश्यकता है और इसे इस तरह ठीक करें? चूंकि यह ठीक काम करता है तो यह ठीक काम करता है।

Answer 1

कीबोर्ड ब्राउज़र खोले जाने पर एंड्रॉइड ब्राउज़र विंडो का आकार बदलता है, इसे रोकने के लिए कोई समाधान नहीं है।

Answer 2

मैं, डोम तत्व जब Android ब्राउज़र स्क्रीन पर कीबोर्ड पॉप अप है कि रास्ते में हो जाता है के लिए -1 z- सूचकांक सेट करके ऐसा हल करने में सक्षम था इस प्रकार है:

function hideNavbar() // needed for Android browser pushing up keyboard 
{ 
    if (screen.height <= 480) // mobile 
    { 
     document.getElementById('navbar').style.zIndex = "-1"; 
    } 
} 

(मैंने इनपुट टेक्स्ट बॉक्स में एक ऑनक्लिक ईवेंट के लिए यह किया था), फिर, 'ऑनब्लर' (यानी जब उपयोगकर्ता स्क्रीन के शीर्ष पर टेक्स्ट/सर्च बॉक्स से बाहर निकलता है) का उपयोग करके, नेविबार के ज़िन्डेक्स को वापस कर दें '1':

function showNavbar() // needed for Android browser pushing up keyboard 
{ 
    if (screen.height <= 480) // mobile 
    { 
     document.getElementById('navbar').style.zIndex = "1"; 
    } 
} 

Answer 3

केविन पायजाक के उत्तर ने मेरे लिए काम किया। आप भी मीडिया प्रश्नों का उपयोग कर सकते हैं:

your.css फ़ाइल:

.hide-element-on-keyboard { 
    z-index: 1; 
} 

@media screen and (min-height: 300px) { 
    .hide-element-on-keyboard { 
     z-index: -1; 
    } 
}