تاريخ النشر: 28 شباط (فبراير) 2025
"العرض حتى حافة الشاشة" هي ميزة في Android تتيح للتطبيقات أن تمتد على عرض الشاشة بالكامل وارتفاعها من خلال الرسم خلف أشرطة نظام Android.
قبل الإصدار 135 من Chrome، لم يكن متصفّح Chrome على Android يعرض المحتوى من الحافة إلى الحافة. يوضّح هذا الدليل تأثير هذا التغيير في المواقع الإلكترونية وما يمكنك فعله كمطوّر لتطبيق هذا التغيير.
الحانات في كل مكان
يشتمل نظام Android على أشرطة النظام التي يوفّرها نظام التشغيل نفسه.
يُطلق على شريط الحالة وشريط الترجمة والشرح وشريط التنقّل معًا اسم أشرطة النظام. وتعرض هذه المعلومات معلومات مهمة، مثل مستوى شحن البطارية والوقت والتنبيهات الواردة من الإشعارات، كما تتيح التفاعل المباشر مع الجهاز من أي مكان.
في أعلى الشاشة، يمكنك العثور على شريط الحالة الذي يحتوي على رموز الإشعارات ورموز النظام.

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

بالإضافة إلى أشرطة نظام Android، يتضمّن Chrome نفسه شريط عناوين يتم توسيعه وتقليصه بشكل ديناميكي أثناء الانتقال للأعلى أو للأسفل.
امتداد Chrome من الحافة إلى الحافة
عند زيارة موقع إلكتروني، يتم عرضه في مستطيل يُعرف باسم مجال العرض (التنسيق).
في Chrome على Android، قبل الإصدار 135 من Chrome، كان يتم رسم مساحة عرض التنسيق هذه بين شريط الحالة في أعلى الشاشة وشريط التنقّل بالإيماءات في أسفل الشاشة. يمكن أن يؤثر ظهور شريط عناوين Chrome (أو عدم ظهوره) في حجم إطار العرض، ولكن لن يتم توسيع إطار العرض أبدًا ليشمل شريط النظام العلوي أو شريط التنقّل بالإيماءات السفلي.

اعتبارًا من الإصدار 135 من Chrome، يُسمح بتوسيع إطار العرض ليشمل شريط التنقّل بالإيماءات في Android. هذا هو السلوك الموضّح على أنّه العرض حتى حافة الشاشة.

سلوك Chrome بدون العرض حتى حافة الشاشة
يعرض التسجيل التالي متصفّح Chrome على Android بدون ميزة العرض على الشاشة بالكامل، ويتحرّك شريط عناوين Chrome (في أعلى الشاشة) بشكل ديناميكي عند الانتقال للأسفل أو للأعلى في الصفحة. ومع ذلك، يظل شريط الحالة العلوي الأصلي لنظام التشغيل Android وشريط التنقّل الأصلي لنظام التشغيل Android في أسفل الشاشة ثابتَين في مكانهما.
في هذه الحالة، يتغيّر حجم إطار عرض التنسيق مع سحب شريط العناوين في Chrome أو توسيعه.
سلوك Chrome في وضع "العرض حتى حافة الشاشة"
اعتبارًا من الإصدار 135 من Chrome، يمكن لمتصفّح Chrome عرض محتوى الويب حتى أسفل الجهاز من خلال توسيع إطار العرض إلى منطقة شريط التنقّل بالإيماءات.
إعلانات ديناميكية من الحافة إلى الحافة مع "الجزء السفلي"
يعرض متصفّح Chrome على الشاشة الكاملة تلقائيًا شريطًا سفليًا ديناميكيًا جديدًا يُعرف باسم "الجزء السفلي من الشاشة" فوق منطقة شريط التنقّل بالإيماءات. تمامًا مثل شريط عناوين Chrome، يتم إخفاء هذا الشريط عند بدء التمرير، ويؤثر في حجم نافذة العرض.
في التسجيل التالي لمتصفّح Chrome على Android مع ميزة العرض على الشاشة بالكامل، يتم سحب شريط العناوين في Chrome وشريط التنقّل ديناميكيًا أثناء الانتقال للأسفل في الصفحة. يؤدي ذلك إلى توسيع إطار العرض، ما يسمح بعرض محتوى الويب حتى الحافة السفلية للجهاز.
يُعدّ هذا السلوك هو السلوك التلقائي الجديد لمتصفّح Chrome من الإصدار 135 فصاعدًا.
عرض الإعلانات على الشاشة بالكامل تلقائيًا بعد تفعيل الميزة
يمكن أن تشير المواقع الإلكترونية التي تم إنشاؤها للعرض على الشاشة بالكامل إلى ذلك من خلال تعديل العلامة الوصفية viewport
. عند تفعيل هذه الميزة، سيمتد إطار العرض تلقائيًا إلى الحافة السفلية بدون أن يظهر الجزء السفلي من الشاشة مطلقًا.
يمكن أن تشير الصفحة إلى أنّها تتيح عرض المحتوى من الحافة إلى الحافة باستخدام العلامة الوصفية viewport
ومفتاح viewport-fit
.
للموافقة على عرض الإعلانات من الحافة إلى الحافة، اضبط viewport-fit
على القيمة cover
.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
اطّلِع على مزيد من المعلومات عن القيم المختلفة viewport-fit
على MDN.
التعامل مع المحتوى الذي قد يحجب شريط التنقّل بالإيماءات
في وضع "ملء الشاشة"، يجب مراعاة أي محتوى قد يحجب شريط التنقّل بالإيماءات.
في معظم الحالات، لن تحتاج إلى اتخاذ أي إجراء لأنّ الذقن السفلي يتحرك من تلقاء نفسه. سيظل بإمكان المستخدمين الوصول إلى كل المحتوى على موقعك الإلكتروني كما كانوا يفعلون من قبل.
ومع ذلك، إذا فعّلت وضع "ملء الشاشة" تلقائيًا أو كان لديك عنصر في أسفل مساحة العرض، قد تحتاج إلى مراعاة هذا المحتوى الذي قد يتمّ حجبه.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
عندما يكون الذقن مرئيًا، سيتمكّن المستخدمون من الوصول إلى المحتوى في البداية، ولكن سيعترضهم شريط التنقّل في Android عندما يختفي الذقن.

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

استخدام الجزء السفلي المُدمَج من المنطقة الآمنة
بالنسبة إلى العناصر التي يتم وضعها في أسفل مساحة العرض، استخدِم safe-area-inset-bottom
كقيمة لسمة bottom
لمنع وضعها أسفل شريط التنقّل بالإيماءات. يتم تعديل القيمة التي يعرضها المتغير safe-area-inset-bottom
ديناميكيًا عندما يتحرك الذقن بعيدًا، ما يؤدي إلى بقاء العناصر في أسفل الشاشة فوق شريط التنقّل بالإيماءات في Android.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}

bottom
عندما يكون الذقن مرئيًا، يظهر الشريط أعلى شريط التنقّل بالإيماءات في Android. عندما يختفي الذقن، يظهر العنصر أيضًا فوقه.كما هو موضّح في الرسوم التوضيحية، لم تكتمل العملية بعد: عند تحريك الذقن بعيدًا، يصبح محتوى الصفحة المتبقّي مرئيًا في منطقة شريط التنقّل بالإيماءات. ويعود السبب في ذلك إلى أنّ مساحة العرض تمتد في هذه الحالة إلى منطقة شريط التنقّل بالإيماءات.
لمنع ظهور المحتوى أسفل المحتوى المرتبط بالجزء السفلي من الصفحة، من الشائع ضبط padding-bottom
على safe-area-inset-bottom
. بهذه الطريقة، يكبر العنصر المرتبط بالجزء السفلي تلقائيًا عندما يختفي الذقن. على الرغم من أنّ هذا الإجراء يعمل، لا يُنصح به لأنّه يؤدي إلى تعذُّر عرض العناصر أثناء تحريك الذقن.
لا تضبط padding
على قيمة مساحة آمنة مضمّنة.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
استخدام الحد الأدنى للإدراج في أسفل المنطقة الآمنة والحد الأقصى للإدراج في أسفل المنطقة الآمنة
بدلاً من ذلك، ننصحك باستخدام safe-area-inset-bottom
وsafe-area-max-inset-bottom
معًا. على عكس safe-area-inset-bottom
الديناميكي الذي يتم تعديله ديناميكيًا عندما يتحرك الذقن بعيدًا، يمثّل safe-area-max-inset-bottom
الحد الأقصى لقيمة safe-area-inset-bottom
.
استخدِم هذا الرمز safe-area-max-inset-bottom
لتوسيع العنصر المرتبط بالجزء السفلي في المقدّمة، واجمعه مع safe-area-inset-bottom
لسحب العنصر للأسفل حتى يقع خلف الذقن.
استخدِم safe-area-max-inset-bottom
مع safe-area-inset-bottom
.
:root {
--safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
--bottom-bar-height: 50px;
}
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
height: var(--bottom-bar-height);
padding-bottom: var(--safe-area-max-inset-bottom);
bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}
body {
padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}
النتيجة المرئية هي نفسها في نهج padding-bottom: env(safe-area-inset-bottom, 0px);
، ولكنّ أدائه أفضل بكثير. وبما أنّه يجب تغيير القيمة المحسوبة لـ bottom
فقط عندما يتحرك الذقن بعيدًا، لا يحدث أي تغيير في التنسيق.

تجربة وضع ملء الشاشة قبل إصدار Chrome 135
لتجربة وضع "ملء الشاشة" قبل طرحه للجميع، عليك تفعيل عدد من علامات ميزات Chrome من خلال chrome://flags
:
EdgeToEdgeBottomChin
(يمكنك اختياريًا ضبط الإعداد على "تفعيل تصحيح الأخطاء" لتلوين نصف الذقن باللون الوردي لتمييزه بوضوح أكبر عن واجهة المستخدم الأخرى)DrawCutOutEdgeToEdge
BottomBrowserControlsRefactor
(لا تضبط القيمة على "مفعّل"، بل على "مفعّل Dispatch yOffset")DynamicSafeAreaInsets
DynamicSafeAreaInsetsOnScroll
EdgeToEdgeWebOptIn
DrawKeyNativeEdgeToEdge
EdgeToEdgeSafeAreaConstraint
(لا تضبط القيمة على "مفعّل"، بل على "متغير قابل للتمرير مفعّل")
تأكَّد من عدم تفعيل العلامات التالية:
DrawNativeEdgeToEdge
EdgeToEdgeEverywhere
أعِد تشغيل Chrome مرّتين.
ملاحظاتك تهمّنا
إذا كانت لديك ملاحظات حول Chrome وتنفيذه على الشاشة بالكامل، يُرجى التواصل معنا من خلال إبلاغنا عن خطأ في Chromium في المكوّن "واجهة المستخدم > المتصفّح > الأجهزة الجوّالة > EdgeToEdge". ونحن نقدِّر لك موافاتنا بتعليقاتك.