في الوقت الحاضر، بدأ العديد من مصممي التطبيقات في التحول إلى تطوير الواجهة الأمامية لـ H5، ولكن حل مشكلة التكيف لجميع طرز iPhone وAndroid هو أولويتنا القصوى. سواء كنت تصمم تطبيقًا أو تكتب واجهة H5 الأمامية، يجب أن تفكر في التوافق مع الهاتف المحمول.
منذ آيفون
1. الشريط العلوي
لقد استخدم العميل السابق دائمًا طريقة 20pt لشريط الحالة + 44pt لشريط التنقل. منذ ايفون
2. شريط التشغيل السفلي
منذ آيفون في هذا الوقت، يجب ترك منطقة آمنة فارغة في الأسفل، ويجب أن يكون السطر السفلي الأخير من محتوى الصفحة في زاوية الهاتف المحمول. يبلغ ارتفاع هذه المنطقة الآمنة 34 نقطة.
3. طريقة التكيف
في الختام، استنادًا إلى معلمات الهاتف المحمول الفريدة الحالية لجهاز iPhoneX، فإن طريقة التكيف التي يمكننا اعتمادها هي:
(1) العلامة الوصفية
من أجل التكيف مع اي فون
<اسم التعريف = محتوى منفذ العرض = العرض = عرض الجهاز، منفذ العرض الملائم = الغلاف>
(2) استفسارات وسائل الإعلام
1. استخدم وظيفة ثابتة
لا يمكن استخدام الدالة الثابتة إلا إذا تم ضبط viewport-fit=cover
@supports(bottom:constant(safe-area-inset-bottom)) { Selector{ padding-bottom:constant(safe-area-inset-bottom); Area-inset-bottom)); // حدد طريقة التكيف وفقًا للوضع الفعلي}}2. استخدم معلمات الطراز الفريدة لجهاز iPhoneX
شاشة الوسائط فقط و(عرض الجهاز: 375 بكسل) و(ارتفاع الجهاز: 812 بكسل) و(-webkit-device-pixel-ratio:3) { #buy { padding-bottom:34px }}(3) حكم js (يتم استخدام Jquery أدناه)
if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){ #buy { padding-bottom:34px }}(4) بروتوكول العميل
يمكنك أيضًا أن تطلب من العميل الاستعلام عما إذا كان جهاز iPhoneX وفقًا لبروتوكول العميل للحفاظ على الاتساق مع العميل.
4. شرح المعلمة
يتم شرح المعلمات في الكود أعلاه على النحو التالي:
يتم حساب المعلمات المذكورة أعلاه بناءً على المعيار 1pt=1px. إذا كانت صفحة H5 تستخدم طريقة rem للقياس، فإن 1pt = 1px * 3 (دقة iPhoneX).
تلخيصما ورد أعلاه هو المحتوى الكامل لهذه المقالة، وآمل أن يكون لمحتوى هذه المقالة قيمة مرجعية معينة لدراسة أو عمل الجميع. إذا كان لديك أي أسئلة، يمكنك ترك رسالة للتواصل شبكة.