VH /% इकाइयों और कुंजीपटल मोबाइल उपकरणों पर

Question

मैं ऊंचाइयों के लिए vh/% तरह इकाइयों के साथ समस्या है। जब कोई input सक्रिय होता है, तो मोबाइल डिवाइस पर कीबोर्ड तत्वों की ऊंचाई बदलता है। कीबोर्ड सक्रिय होने पर मैं इसे स्थिर ऊंचाई में बदलने के लिए समाधान की तलाश में हूं।

jsfiddle (मोबाइल डिवाइस पर खुला)

Answer 1

मुद्दा काफी straightfoward है, हम सब यह पहले अनुभव किया है।

सौभाग्य से मैं शायद ही कभी वेबसाइटों तत्वों व्यूपोर्ट आकार के आधार पर पूरी तरह से फिट करने की जरूरत है कि है पर काम करते हैं, लेकिन जब मैं करता हूँ, मैं इस लक्ष्य को हासिल करने के लिए एक jQuery समाधान का उपयोग करना पसंद।

मैं एक अंग पर बाहर जाना और लगता है कि आप केवल मोबाइल पर शासन के इस प्रकार लागू करने की आवश्यकता करने जा रहा हूँ, इसलिए कोड में जोड़ने के लिए जा रहा हूँ।

jQuery(document).ready(function($){ //wait for the DOM to load 
    if($(window).width() > 640) { //check if screen width is less than 640px (i.e. mobile) 
     $('#my-element').css({ 'height' : $(window).height() }); 
    } 
}); 

यह संभव है करने के लिए कार्रवाई बदलकर सीधे ऊंचाई संपादित करने के लिए:

$('#my-element').height($(window).height()); 

लेकिन हम विशेष रूप से अपने सीएसएस नियम यह है कि की तर्ज पर कुछ कहा गया है अधिलेखित करना चाहते हैं:

#my-element { height: 100vh; } 

I've edited your codepen to include my example।