في تشرين الثاني (نوفمبر)، مع طرح الإصدار 108 من Chrome، سيُجري Chrome بعض التغييرات على طريقة تصرف "مساحة عرض التنسيق" عند عرض لوحة المفاتيح على الشاشة. بعد إجراء هذا التغيير، لن يغيّر Chrome على Android حجم إطار عرض التصميم، بل سيغيّر حجم إطار العرض المرئي فقط. سيؤدي ذلك إلى جعل سلوك Chrome على Android مماثلاً لسلوك Chrome على iOS وSafari على iOS.
في ما يلي بعض المعلومات الأساسية حول ما يحدث وسبب إجراء Chrome لهذا التغيير والخطوات التي يمكنك اتّخاذها للاستعداد.
إطار عرض التنسيق وإطار العرض المرئي
عند زيارة موقع إلكتروني، لا يمكنك الاطّلاع على محتوى الصفحة بالكامل بعد تحميلها. بدلاً من ذلك، يقدّم لك المتصفّح مساحة عرض يمكنك من خلالها الاطّلاع على جزء من الصفحة. يُعرَف إطار العرض هذا أيضًا باسم إطار عرض التنسيق. عندما يزداد حجم محتوى الصفحة كثيرًا، يقدّم المتصفّح آلية لتحريك الصفحة للأعلى أو للأسفل.
عند وضع العناصر باستخدام position: fixed، سيتم عرضها في إطار عرض التنسيق هذا. بما أنّ إطار عرض التنسيق يبقى في مكانه أثناء الانتقال إلى أسفل الصفحة، سيبقى كذلك العناصر التي تستخدم position: fixed.
position: fixed (المربّعات الزرقاء). يظهر في الصورة (من اليمين إلى اليسار) متصفّح Safari على iPhone ومتصفّح Chrome على Android ومتصفّح Firefox على Android.
بالإضافة إلى "إطار عرض التنسيق" هذا، يقدّم المتصفّح أيضًا إطار عرض مرئيًا. ويمثّل الجزء المرئي حاليًا من مساحة العرض. في مستوى التكبير 1، يكون إطار العرض المرئي هذا بحجم إطار عرض التنسيق.
عند التكبير أو التصغير بإصبعَين، يتم تصغير حجم "إطار العرض البصري" مقارنةً بـ "إطار عرض التنسيق".
سلوك تغيير حجم إطار العرض
عند التركيز على حقل إدخال أو أي منطقة أخرى قابلة للتعديل، يمكن للأجهزة، وأغلبها الأجهزة التي تعمل باللمس، عرض لوحة مفاتيح على الشاشة. تُعرف لوحة المفاتيح هذه غالبًا باسم "لوحة المفاتيح الافتراضية"، وهي تتيح للمستخدمين إدخال محتوى في المنطقة القابلة للتعديل.
عند إجراء ذلك، تستجيب المتصفّحات بإحدى الطرق التالية في ما يتعلّق بملفات العرض المختلفة:
- يمكنك تغيير حجم "إطار العرض المرئي" فقط وتعديل "إطار عرض التصميم".
- غيِّر حجم كلّ من "إطار العرض المرئي" و"إطار عرض التصميم".
- لا تغيِّر حجم أيّ من إطارَي عرض "التصميم" أو "العرض المرئي"، مع وضع لوحة المفاتيح الافتراضية فوق كليهما.
يتم عرض هذه السلوكيات الثلاثة على النحو التالي:
استنادًا إلى مجموعة المتصفح ونظام التشغيل التي يستخدمها الزائر، يتم استخدام أحد السلوكيات، ولا يمكنك التحكّم في ذلك.
ربط سلوكيات تغيير الحجم المختلفة
في جهود التحقيق في إطار الإطار المرئي، التي تشكّل جزءًا من Interop 2022، تم التحقيق في جوانب مختلفة متعلقة بالإطار المرئي لكل مجموعة رئيسية من المتصفحات وأنظمة التشغيل.
أحد الجوانب التي تم اختبارها هو سلوك تغيير الحجم عند عرض لوحة المفاتيح على الشاشة. وقد أدّى ذلك إلى التصنيف التالي:
المجموعة الأولى
المتصفّحات التي تغيّر حجم "إطار العرض المرئي"، بدون تغيير "إطار عرض التصميم"
- Safari على أجهزة iOS
- Safari على نظام التشغيل iPadOS
- Chrome على نظام التشغيل ChromeOS
- متصفح Chrome على الأجهزة التي تعمل بنظام iOS
- متصفّح Chrome على نظام التشغيل iPadOS
- Edge على أجهزة iOS
- Edge على iPadOS
المجموعة الثانية
المتصفّحات التي تغيّر حجم كلّ من "إطار العرض المرئي" و"إطار عرض التصميم"
- Chrome على Android
- Firefox على Android
- Edge على Android
- Firefox على أجهزة iOS
المجموعة الثالثة
المتصفّحات التي لا تغيّر حجم أيّ من إطارات العرض:
- لا شيء تلقائيًا: في Chrome على Android، يمكنك تفعيل هذا السلوك من خلال VirtualKeyboard API.
الآثار الجانبية لكل سلوك
يؤدي هذا الاختلاف في كيفية تغيير حجم مساحات العرض المختلفة عند عرض لوحة المفاتيح على الشاشة إلى سلوك تنسيق وحجم غير متوافقَين للمواقع الإلكترونية.
في المتصفّحات من المجموعة 1، مع عرض لوحة المفاتيح على الشاشة:
- تظل القيم المحسوبة للوحدات النسبية لمساحة العرض كما هي.
- تحافظ العناصر المصمّمة لتشغل المساحة المرئية بالكامل على حجمها.
- تظل العناصر التي تستخدم
position: fixedفي مكانها ويمكن أن تحجبها لوحة المفاتيح على الشاشة.
في المتصفّحات من المجموعة 2، مع عرض لوحة المفاتيح على الشاشة:
- تقلّ القيم المحسوبة للوحدات النسبية لمساحة العرض.
- يتم تصغير العناصر التي تم تصميمها لتشغل المساحة المرئية بالكامل.
- يمكن أن تنتهي العناصر التي تستخدم
position: fixedفي مكان آخر في التنسيق.
position: fixed (المربّعات الزرقاء). يظهر متصفح Safari على نظام التشغيل iOS (على يمين الشاشة) ومتصفح Chrome على نظام التشغيل Android (في الوسط وعلى يمين الشاشة).
لا يمكنك معرفة السلوك المستخدَم ما لم تلجأ إلى رصد User-Agent أو الاعتماد على نصوص برمجية مكثفة. ولا يمكنك أيضًا تغيير السلوك، لأنّه يتم تحديده من خلال تركيبة المتصفّح ونظام التشغيل اللذين يستخدمهما المستخدم للوصول إلى موقعك الإلكتروني.
تغيير السلوك التلقائي في الإصدار 108 من Chrome
اعتبارًا من الإصدار 108 من Chrome، سيعدّل Chrome على Android سلوك تغيير حجم إطار العرض بحيث لا يتم تغيير حجم إطار عرض التصميم عند عرض لوحة المفاتيح على الشاشة.
سيؤدي ذلك إلى مواءمة سلوك Chrome على Android مع سلوك Chrome على iOS وiPadOS وWindows وCrOS، وSafari على iOS وiPadOS، وEdge على iOS وiPadOS وWindows.
وبفضل هذا التغيير، يمكن للمؤلفين معرفة السلوك الذي سيتم استخدامه بغض النظر عن نظام التشغيل الذي يعمل عليه Chrome. بالإضافة إلى ذلك، تتيح هذه الطريقة استخدام وحدات ثابتة بالنسبة إلى مساحة العرض: لا يؤثّر عرض لوحة المفاتيح على الشاشة أو إخفاؤها في هذه الوحدات.
.تفعيل سلوك مختلف
إذا كنت تريد أن يستخدم موقعك الإلكتروني سلوك تغيير الحجم قبل الإصدار 108، لا داعي للقلق. سيتم أيضًا طرح إضافة إلى العلامة الوصفية لإطار العرض في الإصدار 108 من Chrome.
من خلال مفتاح interactive-widget، يمكنك إخبار Chrome بالسلوك الذي تريده لتغيير الحجم.
القيم المقبولة لسمة interactive-widget هي:
resizes-visual: يمكنك تغيير حجم "إطار العرض المرئي" فقط وليس "إطار عرض التنسيق".resizes-content: تغيير حجم إطار العرض المرئي وإطار عرض التنسيقoverlays-content: لا تغيِّر حجم أي إطار عرض.
لإعادة تفعيل السلوك "القديم" لمتصفّح Chrome على Android، اضبط العلامة الوصفية لإطار العرض على النحو التالي:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
إذا لم تُدرِج interactive-widget في العلامة الوصفية لإطار العرض، سيستخدم Chrome السلوك التلقائي، وهو resizes-visual.
من الناحية المرئية، تؤثر الإعدادات على مساحات العرض المختلفة على النحو التالي:
resizes-visual وresizes-content وoverlays-content
يمكنك تجربة تأثير كل قيمة في متصفّحك على هذا الموقع الإلكتروني التجريبي.
الاختبار والملاحظات
نتوقع حدوث بعض الاختلافات البسيطة في المواقع الإلكترونية الحالية، ولكن نتوقع ألا يؤدي ذلك إلى حظر المواقع الإلكترونية لأنّ الإصدار 108 من Chrome على Android سيعمل الآن بالطريقة نفسها التي يعمل بها Safari على iOS. وبالتالي، من المفترض أن تعمل المواقع الإلكترونية التي تعمل بشكل جيد على Safari على نظام التشغيل iOS بشكل جيد أيضًا على Chrome 108 على Android.
مع ذلك، نشجّع صنّاع المحتوى على اختبار مواقعهم الإلكترونية بنشاط في الإصدار 108 من Chrome، والذي سيكون متاحًا في إصدار تجريبي اعتبارًا من 27 تشرين الأول (أكتوبر) 2022. ابحث تحديدًا عن العناصر التي تستخدم position: fixed و/أو تعتمد على الوحدات النسبية لإطار العرض.
يمكنك إرسال الملاحظات والآراء على crbug.com. احرص على تضمين "لوحة المفاتيح على الشاشة" في عنوان التقرير.