पता बार छिपाने के दौरान मोबाइल ब्राउज़र आकार बदलने का प्रयास नहीं करते हैं

Question

मेरे पास मेरी वेबसाइट पर दो अनुभाग हैं, जिनकी ऊंचाई मैं window.innerHeight पर सेट करता हूं। जब आकार बदलने की घटना को निकाल दिया जाता है तो ऊंचाई अपडेट होती है।

यह मेरे डेस्कटॉप पर पूरी तरह से काम करता है, लेकिन मेरे एंड्रॉइड फोन पर मुझे कुछ समस्याएं मिलती हैं।

एंड्रॉइड के लिए क्रोम में, यदि आप नीचे स्क्रॉल करते हैं तो पता बार छिप जाता है और विंडो का आकार बदलता है, क्रोम एक आकार बदलने की घटना को सक्रिय करता है और ऊंचाई अपडेट होती है।

फ़ायरफ़ॉक्स और डिफ़ॉल्ट एंड्रॉइड ब्राउज़र पता बार छिपाने के बाद इस आकार बदलने की घटना को नहीं चलाता है। यदि मैं मैन्युअल रूप से पोर्ट्रेट से परिदृश्य तक डिवाइस का अभिविन्यास बदलता हूं और वापस ऊंचाई को अपडेट किया जाना चाहिए।

तो मैंने खुद को एक अभिविन्यास परिवर्तन ईवेंट भेजने की कोशिश की, लेकिन यह काम नहीं किया।

क्या फ़ायरफ़ॉक्स और डिफ़ॉल्ट ब्राउज़र क्रोम की तरह व्यवहार करने का कोई तरीका है?

यहां website है।

Answer 1

वास्तव में मोबाइल ब्राउज़र (परीक्षण एंड्रॉइड/क्रोम आईओएस/सफारी), पता बार टॉगल करते समय, उपयोगकर्ता को स्क्रीन से उंगली लेने के बाद resize ईवेंट आग लगाना।

हालांकि हम touchmove ईवेंट का उपयोग कर सकते हैं, जिसने ब्राउजर को पहले स्थान पर एड्रेस बार छुपाया या दिखाया। हैंडलर में हम व्यूपोर्ट ऊंचाई में परिवर्तनों का पता लगाने के लिए window.innerHeight संपत्ति का उपयोग कर सकते हैं। JQuery का उपयोग करना:

$(window).on('resize touchmove', function() { 
    // adjust heights basing on window.innerHeight 
    // $(window).height() will not return correct value before resizing is done 
}); 

यह सही नहीं है, लेकिन फिर भी यह एकमात्र कामकाजी समाधान है जिसके साथ मैं आया हूं।

पूरा व्यवहार थोड़े क्विर्की है, क्योंकि position: fixed का उपयोग करके स्टाइल किए गए तत्व भी स्पर्श समाप्त होने के बाद ही फिर से खींचे जाएंगे।

इसके अतिरिक्त यदि समायोजन फ़ंक्शन अंतराल का कारण बनता है, तो हैंडलर को शायद बहस करनी चाहिए।