jquery - यूआरएल बार जैसी यूआई तत्वों के कारण व्यूपोर्ट आकार बदलने से रोकने का एक तरीका है?



css responsive-design (1)

मेरी समस्या यह है कि मैं एक उत्तरदायी वेबसाइट बना रहा हूं और व्यूपोर्ट को हमेशा पूर्ण स्क्रीन पर रखना चाहता हूं जैसे दस्तावेज तैयार है, मैं चाहता हूं कि शरीर को उपलब्ध डिवाइस विंडो का 100% होना चाहिए जिसमें यूआरएल बार की ऊंचाई और आईओएस पर अन्य नेविगेशन तत्व शामिल हैं। , और इसके लिए उस रास्ते पर रहने के लिए रीसाइजिंग मेरे प्रतिशत आधारित डिजाइन को तोड़ रहा है। मैंने व्यूपोर्ट के लिए निम्नलिखित को शामिल किया है:

<meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />

एचटीएमएल और शरीर दोनों प्रकार की हैं:

html {
  height: 100%;
  width:100%;
  margin: 0 auto;
  padding:0;
}

body {
    width:100%;
    height:100%;
    margin: 0 auto;
    padding: 0;
}

JQuery के साथ मुझे लगता है कि मैं एक आकार बदलने के बाद स्क्रीन आकार को हथियाने और उस तरह से सेट करने में सफल रहा हूं

$(window).resize(function() {
    var height = $("body").css("height");
    $("body").css("height", height);
});

लेकिन यह केवल तभी काम करेगा यदि पहले उपयोगकर्ता स्क्रॉल करते हैं (ऊपर यूआरएल बार को जगह में रखता है)

मुझे प्रपत्र इनपुट और सॉफ्ट कीबोर्ड के साथ एक ही समस्या थी और इसका इस्तेमाल किया गया था:

$("#name").focus(function() {
    var height = $("body").css("height");
    $("body").css("height", height);
});

मैं कम-यूआई (आईओएस 8 पर चला गया) जैसे समाधानों के लिए चारों ओर देखता हूं और मुझे वैसे भी ज़्यादा ज़रूरत है, 0,1, न्यूनतम ऊंचाई तक स्क्रॉल करें, और डिवाइस के प्रकार आदि की जाँच करने जैसे कई अन्य जटिल समाधान। लेकिन मैं ' टी इसे प्राप्त करने लगते हैं मैं इस पर काफी हद तक नया हूं इसलिए यदि मुझे कुछ स्पष्ट याद आ रहा है, कृपया दयालु हो!





viewport