شاشة iPhone عند تثبيتها في الأعلى، إذا قمت بتحريك الصفحة لأعلى أو لأسفل، فستكون هناك فجوة كبيرة، ولا بأس إذا كانت الخلفية بيضاء بالكامل، وإلا فستبدو وكأنها مكسورة، وهو أمر قبيح للغاية .
حجم شاشة الايفون
الفرق في الحجم بين iPhoneX والموديلات الأخرى
سبب المشكلة المذكورة أعلاه هو أن iPhoneX يحتوي على منطقة آمنة تشير المنطقة الآمنة إلى نطاق النافذة المرئية ولا يتأثر المحتوى الموجود في المنطقة الآمنة بالزوايا ومبيت المستشعر ومؤشر المنزل، المنطقة الزرقاء في الشكل أدناه :
بمعنى آخر، إذا أردنا التكيف بشكل جيد، فيجب علينا التأكد من أن المنطقة المرئية والقابلة للتشغيل من الصفحة تقع ضمن المنطقة الآمنة.
للحصول على أبعاد محددة، يرجى الاطلاع على إرشادات الواجهة البشرية – iPhoneX
كيفية التكيف؟الخطوة الأولى هي تعيين تخطيط صفحة الويب في النافذة المرئية
<اسم التعريف = محتوى منفذ العرض = العرض = عرض الجهاز، منفذ العرض الملائم = الغلاف>
ميزة جديدة في iOS11. من أجل التكيف مع iPhoneX، قامت Apple بتوسيع علامة التعريف الحالية لإطار العرض لتعيين تخطيط صفحة الويب في النافذة المرئية.
ملاحظة: صفحة الويب التي لا تضيف ملحقات بشكل افتراضي هي viewport-fit=contain. إذا كانت بحاجة إلى التكيف مع iPhoneX، فيجب تعيين viewport-fit=cover، وهذه خطوة أساسية للتكيف.لمزيد من التفاصيل، راجع: واصف ملاءمة إطار العرض
في الخطوة الثانية، يقتصر المحتوى الرئيسي للصفحة على المنطقة الآمنة.
.post { الحشو: 12 بكسل؛ الحشو اليسار: env(منطقة آمنة-إدراج اليسار); الحشو لليمين: const(safe-area-inset-right);} وظيفة ثابتةيتم استخدام ميزة جديدة في iOS11، وهي وظيفة CSS في Webkit، لتعيين المسافة بين المنطقة الآمنة والحدود. وهناك أربعة متغيرات محددة مسبقًا:
ملاحظة: لم تعد بعض المتصفحات تدعم الوظيفة الثابتة وتستخدم وظيفة env بدلاً من ذلك.
افتراضيًا، إذا كان العميل يتعامل مع منطقة الأمان، يكون التأثير كما يلي:
بعد استخدام سمة viewport-fit=cover بملء الشاشة:
خريطة منطقة الأمان:
التقديم بعد تحديد المنطقة الآمنة:
يتم ضبط المساحة المتروكة على 12 بكسل أعلاه إذا تم تدوير الاتجاه:
الخطوة الثالثة هي استخدام طريقتي min() و max()
@supports(padding: max(0px)) { .post { padding-left: max(12px, env(safe-area-inset-left)); يمين))؛ }} تم إصلاح مشكلة العنصر الثابت
إذا تم تنفيذ عنوان الصفحة على الواجهة الأمامية وتم تثبيته في الأعلى، فسيتم حظره. في هذا الوقت، يمكنك ضبط القيمة العليا على قيمة المسافة الآمنة، على سبيل المثال:
.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}مقالة مرجعية: تصميم مواقع للايفون X
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.