आईओएस 7 सफारी लैंडस्केप लेआउट विसंगति: आंतरिक ऊंचाई बनाम बाहरी ऊंचाई

आईपैड के लिए आईओएस 7 सफारी में, वेब ऐप्स के साथ एक अजीब समस्या उत्पन्न होती है 100% ऊंचाई का उपयोग करें। window.innerHeight (672px) और window.outerHeight (692px) मान केवल लैंडस्केप मोड में भिन्न होते हैं। इस विसंगति के परिणामस्वरूप अतिरिक्त 20px अप्रयुक्त स्थान होता है, जो नेविगेशन तत्वों के लेआउट और स्क्रीन के निचले भाग में बिल्कुल स्थित तत्वों को प्रभावित करता है।

इस समस्या को कम करने के लिए जब तक कि Apple इसका समाधान नहीं करता, डेवलपर्स ने वर्कअराउंड का सहारा लिया है। एक दृष्टिकोण में iOS 7 में मुख्य भाग को पूरी तरह से व्यवस्थित करना, प्रभावी रूप से 20px अंतर को नीचे के बजाय पृष्ठ के शीर्ष पर स्थानांतरित करना शामिल था। हालाँकि, एक अधिक प्रभावी समाधान सामने आया है।

शरीर की स्थिति को निश्चित पर सेट करके, समस्या से बचा जा सकता है:

@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 672px !important;
    }
}

आईओएस 7 चलाने वाले आईपैड उपकरणों की पहचान करने के लिए, निम्नलिखित स्क्रिप्ट को नियोजित किया जा सकता है:

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}

इस वर्कअराउंड को लागू करके, डेवलपर्स आईपैड के लिए आईओएस 7 सफारी में उचित लेआउट व्यवहार सुनिश्चित कर सकते हैं, जिससे परेशानी वाली ऊंचाई की विसंगति और नेविगेशन और स्थिति पर इसके प्रभाव को खत्म किया जा सकता है।