دليل نقل البيانات من جهاز Android إلى آخر في متصفّح Chrome

تاريخ النشر: 28 شباط (فبراير) 2025

"العرض حتى حافة الشاشة" هي ميزة في Android تتيح للتطبيقات أن تمتد على عرض الشاشة بالكامل وارتفاعها من خلال الرسم خلف أشرطة نظام Android.

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

الحانات في كل مكان

يشتمل نظام Android على أشرطة النظام التي يوفّرها نظام التشغيل نفسه.

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

في أعلى الشاشة، يمكنك العثور على شريط الحالة الذي يحتوي على رموز الإشعارات ورموز النظام.

رسم توضيحي للجزء العلوي من جهاز Android مع تمييز شريط النظام
شريط الحالة على Android مميّز (source).

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

رسم توضيحي للجزء السفلي من جهاز Android مع ظهور شريط التنقّل بالإيماءات
شريط التنقّل بالإيماءات (source).

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

امتداد Chrome من الحافة إلى الحافة

عند زيارة موقع إلكتروني، يتم عرضه في مستطيل يُعرف باسم مجال العرض (التنسيق).

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

رسوم توضيحية لجهاز Android مزوّد بمتصفّح Chrome على Android غير ممتد من الحافة إلى الحافة تعرض الصورة التوضيحية على يمين الصفحة متصفّح Chrome مع شريط العناوين الموسّع. بين شريط العناوين وشريط التنقّل بالإيماءات، يظهر مربّع مميّز باللون الأخضر يبلغ حجمه ‎100svh. يعرض الرسم التوضيحي على يسار الصفحة متصفّح Chrome مع سحب شريط العناوين. بين شريط الحالة وشريط التنقّل بالإيماءات، يظهر مربّع مميّز باللون الأخضر أبعاده 100×100 بكسل. يحتوي إطار العرض نفسه على إطار أزرق متقطّع.
الحد الأدنى والحد الأقصى لحجم إطار العرض في Chrome على Android قبل الإصدار 135 من Chrome تُعرف هذه الأحجام باسم "مساحة العرض الصغيرة" و"مساحة العرض الكبيرة". يضم إطار العرض نفسه إطارًا أزرق متقطّعًا.

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

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

سلوك Chrome بدون العرض حتى حافة الشاشة

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

السلوك القديم: متصفّح Chrome على Android بدون ميزة ملء الشاشة وhttps://developer.chrome.com/ محمّل.

في هذه الحالة، يتغيّر حجم إطار عرض التنسيق مع سحب شريط العناوين في Chrome أو توسيعه.

سلوك Chrome في وضع "العرض حتى حافة الشاشة"

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

إعلانات ديناميكية من الحافة إلى الحافة مع "الجزء السفلي"

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

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

السلوك الجديد: Chrome على Android متوافق مع الشاشة الكاملة وhttps://developer.chrome.com/ محمَّل. لاحِظ كيف يتم إخفاء الجزء السفلي من الذقن أثناء التمرير في الصفحة.

يُعدّ هذا السلوك هو السلوك التلقائي الجديد لمتصفّح 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 مزوّد بتطبيق Chrome على Android معروض على الشاشة بالكامل تعرض الصورة التوضيحية على يمين الصفحة متصفّح Chrome مع ظهور الذقن. يظهر المحتوى المرتبط بالجزء السفلي (المعروض باللون الأحمر) فوقه مباشرةً. تعرض الصورة التوضيحية على اليسار متصفّح Chrome بدون الذقن. يظهر المحتوى المرتبط بالجزء السفلي على الحافة السفلية للجهاز. ويوضّح النص المصاحب أنّ المحتوى في أسفل الشاشة أصبح الآن محجوبًا بسبب شريط التنقّل بالإيماءات.
رسم توضيحي لموقع إلكتروني يتضمّن عنصرًا في أسفل الصفحة مع bottom: 0. عندما يكون الجزء السفلي مرئيًا، يكون العنصر في أسفل الصفحة أعلى شريط التنقّل في Android. عندما يتحرك الذقن بعيدًا، يتم وضع العنصر خلف شريط التنقّل في Android الذي يحجب العنصر جزئيًا في تلك المرحلة.

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

أجزاء المنطقة الآمنة المضمّنة

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 65.
  • Safari: 11.

Source

أجزاء المنطقة الآمنة المُدمَجة هي أربع متغيّرات بيئة تحدّد مستطيلاً من خلال الأجزاء المُدمَجة العلوية واليسرى واليسرى واليسرى من حافة مساحة العرض.

تشكّل هذه القيم الأربع معًا مستطيل المنطقة الآمنة الذي يمكن وضع المحتوى فيه بأمان كي لا يتم حجبه بعناصر مثل شريط التنقّل بالإيماءات في Android.

رسم توضيحي لجهاز Android مزوّد بمتصفّح Chrome في وضع ملء الشاشة يتضمّن الذقن طريقة عرض قابلة للانزلاق. يظهر داخل Chrome مستطيل المنطقة الآمنة باللون الأصفر. وتظهر الحافة السفلية للشاشة فوق شريط التنقّل بالإيماءات مباشرةً. يظهر الجزء السفلي من إطار العرض باللون الأزرق في شريط التنقّل بالإيماءات. يشير النص المعروض إلى أنّ مستطيل المنطقة الآمنة مُدمَج في إطار العرض بواسطة safe-area-bottom-inset الذي يمنع ظهور المحتوى أسفل شريط التنقّل بالإيماءات.
صورة توضيحية لمتصفّح Chrome في وضع ملء الشاشة مع مستطيل إطار العرض والمنطقة الآمنة باللون الأصفر بما أنّ الجزء السفلي من الشاشة مُدمَج، يمنع الجزء المُدمَج من المنطقة الآمنة مستطيل المنطقة الآمنة من الوصول إلى شريط التنقّل بالإيماءات. ونتيجةً لذلك، يظهر لك لمحة عن إطار العرض أسفل شريط التنقّل بالإيماءات هذا.

استخدام الجزء السفلي المُدمَج من المنطقة الآمنة

بالنسبة إلى العناصر التي يتم وضعها في أسفل مساحة العرض، استخدِم 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);
}
رسم توضيحي لجهاز Android مزوّد بمتصفّح Chrome في وضع ملء الشاشة في الرسم البياني على يمين الصفحة، يظهر الجزء السفلي من الشاشة، ويظهر المحتوى المرتبط بالجزء السفلي فوقه مباشرةً. في الرسم البياني على يسار الصفحة، لا يظهر الذقن ويتم وضع المحتوى المرتبط بالجزء السفلي في المكان نفسه على اليسار. يؤدي ذلك إلى ظهور المحتوى العادي أسفل شريط التنقّل بالإيماءات.
رسوم توضيحية لموقع إلكتروني يتضمّن عنصرًا في أسفل الصفحة يستخدم مساحة العرض الآمنة في أسفل الشاشة مع السمة 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 فقط عندما يتحرك الذقن بعيدًا، لا يحدث أي تغيير في التنسيق.

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

تجربة وضع ملء الشاشة قبل إصدار Chrome 135

لتجربة وضع "ملء الشاشة" قبل طرحه للجميع، عليك تفعيل عدد من علامات ميزات Chrome من خلال chrome://flags:

  • EdgeToEdgeBottomChin (يمكنك اختياريًا ضبط الإعداد على "تفعيل تصحيح الأخطاء" لتلوين نصف الذقن باللون الوردي لتمييزه بوضوح أكبر عن واجهة المستخدم الأخرى)
  • DrawCutOutEdgeToEdge
  • BottomBrowserControlsRefactor (لا تضبط القيمة على "مفعّل"، بل على "مفعّل Dispatch yOffset")
  • DynamicSafeAreaInsets
  • DynamicSafeAreaInsetsOnScroll
  • EdgeToEdgeWebOptIn
  • DrawKeyNativeEdgeToEdge
  • EdgeToEdgeSafeAreaConstraint (لا تضبط القيمة على "مفعّل"، بل على "متغير قابل للتمرير مفعّل")

تأكَّد من عدم تفعيل العلامات التالية:

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

أعِد تشغيل Chrome مرّتين.

ملاحظاتك تهمّنا

إذا كانت لديك ملاحظات حول Chrome وتنفيذه على الشاشة بالكامل، يُرجى التواصل معنا من خلال إبلاغنا عن خطأ في Chromium في المكوّن "واجهة المستخدم > المتصفّح > الأجهزة الجوّالة > EdgeToEdge". ونحن نقدِّر لك موافاتنا بتعليقاتك.