معالجة شريط عناوين iOS في تخطيطات 100vh

ليست علة، ولها ميزة.

أثناء نشر أول تحويل من PSD مع صورة بطل 100vh و 100vw الجميلة ، شعرت بالفزع لاكتشاف أن الجزء السفلي من تصميمي كان مخفيًا عند مشاهدته من جهاز iPhone 6s iOS 10 Safari. لماذا ا؟ اعتقدت أنني فعلت كل شيء بشكل صحيح! هل قمت عن طريق الخطأ بإضافة هامش أو حشوة في مكان ما؟ ماذا كنت أشرف؟

بعد فحص دقيق ، أدركت سريعًا أنه على الرغم من أن صورة البطل الخاصة بي كانت في الواقع 100 فولت ، فقد تمت تغطيتها جزئيًا بواسطة شريط عنوان Safari وأدواته ، مما أدى إلى ظهور "wiggle-scroll" اللعين. هذا جيد ، فكرت. لا يمكن إجراء بحث سريع على Google و Stack Overflow. ومع ذلك ، فقد علمت أن الحل ليس واضحًا تمامًا.

بعد إجراء بعض الأبحاث ، أدركت أنها شكوى شائعة إلى حد ما ، يشار إليها باسم "حشرة التمرير iOS viewport". في فبراير من عام 2015 ، أبلغ نيكولا هويزي عن الخطأ على Webkit Bugzilla عندما اكتشف أن الجزء السفلي من لعبته المحمولة البالغة 100 فولت في الساعة قد تم قطعه بواسطة شريط أزرار المتصفح. ورد بنيامين بولان ، مهندس في شركة أبل ، على هوزي. صرح - بأسلوب مبرمج حقيقي - أنه لم يكن خطأ ، إنها ميزة.

هذا متعمد تماما. استغرق الأمر الكثير من العمل من جانبنا لتحقيق هذا التأثير. :)

المشكلة الأساسية هي: تتغير المنطقة المرئية ديناميكيًا أثناء التمرير. إذا قمنا بتحديث ارتفاع إطار عرض CSS وفقًا لذلك ، فنحن بحاجة إلى تحديث التصميم أثناء التمرير. ليس ذلك فقط مثل القرف ، ولكن القيام بذلك عند 60 إطارًا في الثانية أمرًا مستحيلًا في معظم الصفحات (60 إطارًا في الثانية هو الإطار الأساسي على نظام iOS).

من الصعب أن تظهر لك الجزء "يشبه القرف" ، ولكن تخيل أثناء التمرير ، أن المحتويات تتحرك وما تريده على الشاشة يتحول باستمرار.

التحديث الحيوي للارتفاع لا يعمل ، كان لدينا بعض الخيارات: إسقاط وحدات viewport على iOS ، تطابق حجم المستند كما كان قبل iOS 8 ، استخدام حجم العرض الصغير ، استخدام حجم العرض الكبير.

من البيانات التي لدينا ، كان استخدام حجم العرض الأكبر أفضل حل وسط. معظم مواقع الويب التي تستخدم وحدات viewport كانت رائعة في معظم الأوقات.

أنا شخصياً لست مهندسًا في شركة Apple ، لذا فأنا أصدقه عندما يقول إن هناك أسبابًا وجيهة وراء تصميمهم لهذا السلوك. وهكذا ، تم وضع علامة الخطأ "حل WONTFIX" ، وأدركت أنني سوف تضطر إلى الخوض في أعمق إذا أردت في أي وقت مضى صورة جميلة ، 100vh البطل.

الحل 1: CSS Media Queries

هذه الطريقة ، وإن لم تكن أنيقة تمامًا ، فهي بسيطة وسهلة التنفيذ. ما عليك سوى استهداف جميع الأجهزة التي تعمل بنظام التشغيل iOS مع عرض معين وارتفاعه. فيما يلي رمز ، من باب المجاملة pburtchaell ، حيث سيكون ".foo" فئة على عنصر الارتفاع الكامل.

media all و (عرض الجهاز: 768 بكسل) و (ارتفاع الجهاز: 1024 بكسل) و (الاتجاه: صورة) {
    .foo {
        الارتفاع: 1024 بكسل ؛
    }
}
                                            
/ * iPad مع اتجاه أفقي. * /
media all و (عرض الجهاز: 768 بكسل) و (ارتفاع الجهاز: 1024 بكسل) و (الاتجاه: أفقي) {
    .foo {
        الارتفاع: 768 بكسل ؛
    }
}
                                               
/* ايفون 5
يمكنك أيضًا استهداف الأجهزة ذات نسبة العرض إلى الارتفاع. * /media الشاشة و (نسبة العرض إلى الارتفاع للجهاز: 40/71) {
    .foo {
        الارتفاع: 500 بكسل ؛
    }
}

بالنظر إلى الكود أعلاه ، يبدو أن تداخل محتوى بسيط أمر لا مفر منه. ومع ذلك ، فإن العناصر ذات الموضع والتحجيم التي تعتمد على وحدات viewport ستبقى ثابتة. هذا فوز! إضافة شيء مثل حساب بسيط (100vh - heightOfBar) سيعوض عن شريط العنوان. ولكن مع وجود العديد من الأجهزة والمتصفحات التي تدعمها ، لا يبدو هذا كحل مستدام.

الحل 2: استهداف innerHeight مع Javascript.

تشير القياسات الداخلية إلى ارتفاع / عرض منفذ العرض ، مع مراعاة أشرطة التمرير العمودي / الأفقي. هذا هو المطلوب! فيما يلي مخطط لما يستلزمه هذا.

باستخدام هذه المعرفة ، يمكنك استخدام برنامج نصي بسيط مثل هذا لضبط الارتفاع على تحميل الصفحة والاحتفاظ بها ثابتة حتى يتم تغيير حجمها ، من مستخدم Stack Overflow tobiq:

window.onresize = function () {
    document.body.height = window.innerHeight؛
}
window.onresize ()؛ // دعا لضبط الارتفاع في البداية.

الحل 3: Div100vh تتفاعل المكون

بما أننا جميعًا نحب React ، فقد أردت إيجاد حل مناسب لمكونات React. لقد وجدت حزمة npm بواسطة Mikhail Vasin تهدف إلى حل هذه المشكلة. تثبيت مثل ذلك:

تثبيت NPM - حفظ رد- div-100vh

ثم قم باستيراد المكون ولف العناصر الخاصة بك فيه ، مثل:

استيراد Div100vh من 'react-div-100vh' ؛
const MyFullscreenComponent = () => (
    
       الأشياء الخاصة بك يذهب هنا
    
)

وهناك تذهب!

بعد اختبار هذه الحلول المختلفة ، أدرك أنه لا يوجد حل واحد يناسب الجميع لهذه المشكلة. لذا ، يرجى أن تكون مجتهدًا مع متصفحك المتقاطع واختبار الأجهزة المتقاطعة. وربما تجنب استخدام وحدات vh / vw للجوال تمامًا لأن سلوك العربات التي تجرها الدواب مع هذه الوحدات موثق جيدًا في متصفحات المحمول.

اسمحوا لي أن أعرف ما إذا كانت هذه الحلول مفيدة لك ، وما هي الحلول التي عملت بشكل أفضل!