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

Bramus

تاريخ النشر: 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, viewpo>rt-fit=cover" /

مزيد من المعلومات حول القيم المختلفة لـ viewport-fit على شبكة مطوّري Mozilla

التعامل مع المحتوى الذي قد يحجبه شريط التنقّل بالإيماءات

في وضع "من الحافة إلى الحافة"، يجب مراعاة أي محتوى قد يحجبه شريط التنقّل بالإيماءات.

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

ومع ذلك، إذا اخترت عرض المحتوى من الحافة إلى الحافة تلقائيًا أو كان لديك عنصر موضوع في أسفل إطار العرض، قد تحتاج إلى مراعاة احتمال تغطية هذا المحتوى.

.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);
}

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

لمنع عرض المحتوى أسفل المحتوى المثبّت في أسفل الشاشة، يتم عادةً ضبط قيمة 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. */
}

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

بدلاً من ذلك، ننصح باستخدام مزيج من 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 فقط عند ابتعاد الذقن، لا يحدث أيّ تشويش في التصميم.

تجربة وضع "من الحافة إلى الحافة" قبل الإصدار 135 من Chrome

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

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

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

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

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

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

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