التناقض في تخطيط المناظر الطبيعية لنظام التشغيل iOS 7: الارتفاع الداخلي مقابل الارتفاع الخارجي

في iOS 7 Safari لأجهزة iPad، تنشأ مشكلة غريبة مع تطبيقات الويب التي الاستفادة من الارتفاع بنسبة 100%. تتباعد قيم window.innerHeight (672px) وwindow.outerHeight (692px) فقط في الوضع الأفقي. يؤدي هذا التناقض إلى 20 بكسل إضافية من المساحة غير المستخدمة، مما يؤثر على تخطيط عناصر التنقل والعناصر الموضوعة تمامًا في أسفل الشاشة.

للتخفيف من هذه المشكلة حتى تعالجها Apple، لجأ المطورون إلى الحلول البديلة. يتضمن أحد الأساليب تحديد موضع الجسم بشكل كامل في نظام التشغيل iOS 7، مما يؤدي بشكل فعال إلى تحويل الفجوة البالغة 20 بكسل إلى أعلى الصفحة بدلاً من الأسفل. ومع ذلك، فقد ظهر حل أكثر فعالية.

من خلال ضبط وضع الجسم على ثابت، يمكن التحايل على المشكلة:

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

لتحديد أجهزة iPad التي تعمل بنظام التشغيل iOS 7، يمكن استخدام البرنامج النصي التالي:

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

من خلال تنفيذ هذا الحل البديل، يمكن للمطورين ضمان سلوك التخطيط المناسب في iOS 7 Safari لأجهزة iPad، مما يزيل التناقض المزعج في الارتفاع وتأثيره على التنقل وتحديد المواقع.