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

Bramus

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

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

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

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

ملاحظة: يتم طرح هذه الميزة باستخدام Chrome Variation. لذلك، قد يظهر لك في إصدار سابق من Chrome.

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

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

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

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

شريط الحالة على Android مميّز (source).

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

شريط التنقّل بالإيماءات (source).

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

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

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

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

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

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

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

ملاحظة: أضاف متصفّح Chrome على نظام التشغيل iOS ميزة ملء الشاشة مع إصدار iOS 11.3. تنطبق الاقتراحات الواردة في هذا الدليل أيضًا على متصفّح Chrome الذي يعمل على نظام التشغيل iOS.

سلوك 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 عندما يختفي الذقن.

رسم توضيحي لموقع إلكتروني يتضمّن عنصرًا في أسفل الصفحة مع bottom: 0. عندما يكون الجزء السفلي مرئيًا، يكون العنصر في أسفل الصفحة أعلى شريط التنقّل في Android. عندما يتحرك الذقن بعيدًا، يتم وضع العنصر خلف شريط التنقّل في Android الذي يحجب العنصر جزئيًا في تلك المرحلة.

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

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

Browser Support

• 69
• 79
• 65
• 11

Source

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

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

صورة توضيحية لمتصفّح 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);
}

رسوم توضيحية لموقع إلكتروني يتضمّن عنصرًا في أسفل الصفحة يستخدم مساحة العرض الآمنة في أسفل الشاشة مع السمة 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); /* 🛑 Don't do this, as it causes layout thrashing. */
}

ملاحظة مهمة: لمنع حدوث تراجع في الأداء، لن يُزِل Chrome شريط القوائم أثناء الانتقال للأعلى أو للأسفل عند رصد هذا النمط.

استخدام الحد الأدنى للإدراج في أسفل المنطقة الآمنة والحد الأقصى للإدراج في أسفل المنطقة الآمنة

بدلاً من ذلك، ننصحك باستخدام 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));
}

تجربة عرض توضيحي مباشر

ملاحظة: تم اختيار القيمة الاحتياطية 36px لـ safe-area-max-inset-bottom لتلبية احتياجات المتصفّحات التي لا تتيح استخدام safe-area-max-inset-bottom. تم اختيار هذه القيمة لأنّ Safari على نظام التشغيل iOS في وضع "علامة تبويب واحدة" يتضمّن الحد الأقصى للإزاحة السفلية 36px في الوضع العمودي.

ملاحظة مهمة: يتضمّن Chrome تحسينات على الرموز البرمجية، ما يُعرف باسم المسار السريع، عند رصد نمط calc(env(safe-area-inset-bottom, …) +/- …);. يتيح هذا المسار السريع للمحتوى المرتبط بالجزء السفلي من الشاشة الانتقال مع الذقن بطريقة فعّالة أثناء تحرك الذقن.

النتيجة المرئية هي نفسها في نهج padding-bottom: env(safe-area-inset-bottom, 0px);، ولكنّ أدائه أفضل بكثير. وبما أنّه يجب تغيير القيمة المحسوبة لـ bottom فقط عندما يتحرك الذقن بعيدًا، لا يحدث أي تغيير في التنسيق.

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

ملاحظة: تتوفّر الحد الأقصى من عمليات إدراج المنطقة الآمنة (safe-area-max-inset-bottom والأصدقاء) من الإصدار 135 من Chrome.

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

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

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

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

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

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

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

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