خلفية

من هاتف iPhone الخاص بشركة Apple، تتوافق العديد من التطبيقات بشكل مباشر مع نمط عرض الويب الموجود بالداخل. عندما تكون الشاشة في الوضع الرأسي، غالبًا ما يكون الجزء العلوي عبارة عن شريط تنقل، والذي لا يغطي المحتوى الموجود في عرض الويب. يتم تعيين الارتفاع السفلي من مستوى التطبيق بحيث لا يكون الجزء السفلي من عرض الويب ضمن منطقة الشريط الأفقي الأسود، بحيث لا يعيق عرض المحتوى في عرض الويب.

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

منطقة آمنة

أولاً، دعونا نلقي نظرة على المنطقة الآمنة في هاتف iPhone

حلول متوافقة

لحسن الحظ، عندما ظهر iPhoneX، قام نظام ios11 الرسمي أيضًا بتوفير WebKit Api ليكون متوافقًا مع هذا الاختلاف في الأسلوب.

الخطوة 1: قم بتعيين سمة ملاءمة إطار العرض

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
يحتوي viewport-fit على ثلاث قيم للسمات: تلقائي، واحتواء، ومناسب. الافتراضي هو تلقائي.
تحتوي على: تحتوي النافذة المرئية على محتوى صفحة الويب بالكامل، ويتم عرض محتوى الصفحة في المنطقة الآمنة
الغلاف: يغطي محتوى صفحة الويب النافذة المرئية بالكامل ويملأ محتوى الصفحة الشاشة.
تلقائي: قيمة افتراضية، تتوافق مع الاحتواء
 
افتراضيًا، يعرض Safari حالة viewport-fit=contain، كما هو موضح أدناه. في الوضع الأفقي، يكون محتوى الصفحة في عرض الويب ضمن المنطقة الآمنة. ومع ذلك، من منظور الأسلوب، هذا ليس جميلًا جدًا ولا يستفيد بشكل جيد من ميزة ملء الشاشة التي يوفرها iPhoneX.

لحل هذه المشكلة، يتضمن WebKit في نظام iOS11 وظيفة CSS جديدة env()، بالإضافة إلى أربعة متغيرات بيئة محددة مسبقًاsafe-area-inset-left,safe-area-inset-right,safe-area-inset-topوsafe-area-inset-bottom. تمثل متغيرات البيئة الأربعة هذه المسافة من المنطقة الآمنة.

  • Safe-area-inset-left: المسافة بين المنطقة الآمنة والحد الأيسر
  • Safe-area-inset-right: المسافة بين المنطقة الآمنة والحدود اليمنى
  • منطقة آمنة-داخل-أعلى: المسافة من المنطقة الآمنة إلى الحد العلوي
  • منطقة آمنة-إدراج-أسفل: المسافة من المنطقة الآمنة إلى الحد السفلي

قبل ios11.2، تم استخدام الدالة Constants()، ولكن تم تغييرها لاحقًا إلى الدالة env() في ios11.2. لكي تكون متوافقًا مع كليهما، يمكنك كتابة كليهما.

الخطوة 2: ضبط مسافة المنطقة الآمنة

.post {
    padding: 12px;
    padding-left: constants(safe-area-inset-left); // ios<11.2
    padding-left: env(safe-area-inset-left); // ios>=11.2
}

بهذه الطريقة، عندما لا يكون في المنطقة الآمنة، فإن env(safe-area-inset-left) لا يساوي 0، مما سيؤدي إلى تعيين مسافة آمنة على الحشو الأيسر حتى لا يتم حظر المحتوى.

ما سبق هو الحالة التي يتم فيها حظره بواسطة "الانفجارات". في الواقع، في كثير من الحالات، يحجب الشريط الأسود الصغير الموجود في الأسفل الشريط العائم، وتدعم السمات الحكم.@supports،فقطenv(safe-area-inset-bottom)لن يتم تنفيذ ملف CSS الداخلي إلا عندما يكون مدعومًا بواسطة المتصفح.

 

.bottom-bar{
  width: 100%;
  position: fixed;
  bottom: 0;
  background: blue;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-bar {
      padding-bottom: constant( safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

ملاحظة: يكون عرض الويب في WeChat افتراضيًا على viewport-fit=cover. ما عليك سوى تحديد مسافة آمنة. الحل المذكور أعلاه ينطبق أيضًا على تطبيق WeChat الصغير.