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

Bramus

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

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

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

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

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

أشرطة في كل مكان

يأتي نظام Android مزوّدًا بأشرطة النظام التي يوفّرها نظام التشغيل نفسه.

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

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

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

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

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

بالإضافة إلى أشرطة نظام 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 من Chrome فصاعدًا.

تطبيق ميزة "العرض على كامل الشاشة" تلقائيًا مع إمكانية الموافقة

يمكن للمواقع الإلكترونية المصمّمة للعرض على كامل الشاشة الإشارة إلى ذلك من خلال تعديل العلامة الوصفية 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، أو لتوسيع خلفيتها إلى تلك المنطقة.

المنطقة الآمنة

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

تشكّل هذه القيم الأربع معًا مستطيل المنطقة الآمنة الذي يمكن وضع المحتوى فيه بأمان كي لا تعترضه عناصر مثل شريط التنقّل بالإيماءات في 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 على قيمة safe-area-inset.

.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.

تجربة ميزة "العرض على كامل الشاشة" قبل الإصدار 135 من Chrome

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

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

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

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

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

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

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