في تشرين الثاني (نوفمبر) المقبل، مع إصدار Chrome 108، سيُجري Chrome بعض التغييرات على كيفية عمل "إطار عرض التنسيق" عند إظهار لوحة المفاتيح على الشاشة (OSK). مع هذا التغيير، لن يغيّر Chrome على نظام التشغيل Android حجم إطار عرض التنسيق، وسيغيّر حجم إطار العرض المرئي فقط بدلاً من ذلك. وبذلك سيكون سلوك Chrome على أجهزة Android مساويًا لسلوك Chrome على نظامَي التشغيل iOS وSafari على نظام التشغيل iOS.
في ما يلي بعض المعلومات الأساسية عن ما يحدث وسبب إجراء Chrome لهذا التغيير وما يمكنك فعله للاستعداد لهذه التغييرات.
إطار عرض التنسيق وإطار العرض المرئي
عند زيارة موقع ويب، لن تتمكن من رؤية محتويات الصفحة بأكملها بعد تحميلها. بدلاً من ذلك، يوفر لك المتصفح إطار عرض يمكنك من خلاله رؤية جزء من الصفحة. يُعرف إطار العرض هذا أيضًا باسم إطار عرض التنسيق. عندما يزداد حجم محتوى الصفحة بشكل كبير، يوفّر المتصفح آلية التمرير.
عند تحديد موضع العناصر باستخدام position: fixed، سيتم وضع هذه العناصر في إطار عرض التنسيق هذا. نظرًا لبقاء إطار عرض التنسيق في مكانه أثناء التمرير لأسفل الصفحة، ستظل العناصر التي تستخدم position: fixed كذلك.
position: fixed (المربعات الزرقاء). يمكنك الاطّلاع عليه (من اليسار إلى اليمين) Safari على iPhone وChrome على Android وFirefox على Android.
بالإضافة إلى "إطار عرض التنسيق" هذا، يوفّر المتصفح أيضًا إطار عرض مرئيًا. ويمثل الجزء المرئي حاليًا من إطار العرض. في مستوى التكبير/التصغير 1، يبلغ إطار العرض المرئي هذا حجم إطار عرض التنسيق.
عند التكبير بإصبعين، يتم تقليص حجم "إطار العرض المرئي" بالنسبة إلى "إطار عرض التنسيق".
سلوك تغيير حجم إطار العرض
عند التركيز على إدخال أو أي منطقة أخرى قابلة للتعديل، يمكن أن تعرض الأجهزة، والتي معظمها أجهزة تعمل بشاشة تعمل باللمس، لوحة مفاتيح على الشاشة. تتيح لوحة المفاتيح هذه، التي يشار إليها غالبًا باسم لوحة المفاتيح الظاهرية، للمستخدمين إدخال المحتوى في المنطقة القابلة للتعديل.
عند إجراء ذلك، تستجيب المتصفحات بإحدى الطرق التالية في ما يتعلق بإطارات العرض المختلفة:
- يمكنك تغيير حجم إطار العرض المرئي فقط وإزاحة إطار عرض التنسيق.
- قم بتغيير حجم كل من إطار العرض المرئي وإطار عرض التنسيق.
- لا تغيّر حجم أي من "إطارات عرض التنسيق" أو "إطار العرض المرئي"، لأنّ لوحة المفاتيح الافتراضية تظهر فوقهما.
يتم تصور هذه السلوكيات الثلاثة على النحو التالي:
استنادًا إلى تركيبة المتصفح ونظام التشغيل التي يستخدمها الزائر، يتم استخدام أحد السلوكين الخارجين عن سيطرتك.
تعيين السلوكيات المختلفة لتغيير الحجم
في قسم جهود تحقيق إطار العرض في Interop 2022، تم فحص العديد من الجوانب ذات الصلة بإطار العرض، وذلك لكل تركيبة المتصفِّح ونظام التشغيل الرئيسية.
أحد الجوانب التي تم اختبارها هو سلوك تغيير الحجم عند عرض OSK. وقد أدى ذلك إلى التصنيف التالي:
المجموعة الأولى
المتصفّحات التي تغيّر حجم إطار العرض المرئي، مع ترك إطار عرض التنسيق كما هو
- 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
الآثار الجانبية لكل سلوك
إنّ هذا الاختلاف في كيفية تغيير حجم إطارات العرض المختلفة عند عرض OSK يؤدي إلى تصميم غير قابل للتشغيل التفاعلي وسلوك تغيير الحجم للمواقع الإلكترونية.
في المتصفّحات من المجموعة 1، مع عرض OSK:
- تظل القيم المحسوبة للوحدات النسبية لإطار العرض كما هي.
- العناصر التي تم تصميمها لشغل المساحة المرئية الكاملة تحافظ على حجمها.
- العناصر التي تستخدم
position: fixedتظل في مكانها ويمكن أن تحجبها OSK.
في المتصفّحات من المجموعة 2، مع عرض OSK:
- تقل القيم المحسوبة للوحدات النسبية لإطار العرض.
- العناصر التي تم تصميمها لشغل المساحة المرئية الكاملة.
- العناصر التي تستخدم
position: fixedيمكن أن تنتهي إلى مكان آخر في التنسيق.
position: fixed (المربعات الزرقاء). يظهر هنا المتصفح Safari على نظام التشغيل iOS (اليسار) وChrome على نظام Android (في الوسط واليمين).
ما لم تلجأ إلى تحليل وكيل المستخدم أو الاعتماد على نص برمجي مكثف، لن تتمكّن من معرفة السلوك المستخدَم. ولا يمكنك أيضًا تغيير السلوك، لأنه يتم تحديده من خلال المتصفِّح ونظام التشغيل الذي ينتقل من خلاله المستخدم.
تغيير السلوك التلقائي في الإصدار 108 من Chrome
بدءًا من Chrome 108، سيضبط Chrome على نظام Android سلوك تغيير حجم إطار العرض بحيث لا يتم تغيير حجم "إطار عرض التنسيق" عند ظهور لوحة المفاتيح على الشاشة.
سيؤدي ذلك إلى مواءمة سلوك Chrome على نظام التشغيل Android مع سلوك Chrome على أنظمة التشغيل iOS وiPadOS وWindows وCrOS وSafari على iOS وiPadOS وEdge على أنظمة التشغيل iOS وiPadOS وWindows.
بفضل هذا التغيير، يمكن للمؤلفين معرفة السلوك الذي سيتم استخدامه، بغض النظر عن نظام التشغيل الذي يعمل عليه متصفِّح Chrome. بالإضافة إلى ذلك، يتيح استخدام وحدات إطار عرض مستقرة: لا يؤثر إظهار أو إخفاء OSK على هذه الوحدات.
.الموافقة على سلوك مختلف
إذا كنت تريد أن يستخدم موقعك الإلكتروني سلوك تغيير الحجم قبل الإصدار 108، لا داعي للقلق. وتشكّل إضافة الشحن في Chrome 108 أيضًا إضافة إلى العلامة الوصفية لإطار العرض.
من خلال مفتاح 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.
يمكنك تجربة تأثير كل قيمة في متصفّحك على هذا الموقع الإلكتروني التجريبي.
الاختبار والملاحظات
نتوقع حدوث بعض الاختلافات الطفيفة عن المواقع الإلكترونية الحالية، ولكن نتوقّع ألا يؤدي ذلك إلى حظر الوصول إلى المواقع الإلكترونية الحالية، لأنّ Chrome 108 على نظام التشغيل Android سيعمل الآن بشكل مشابه لتجربة Safari على أجهزة iOS. لذلك، يجب أن تعمل مواقع الويب التي تعمل بشكل جيد في Safari على نظام التشغيل iOS بشكل جيد أيضًا على Chrome 108 على Android.
ومع ذلك، ننصح مؤلفي المواقع الإلكترونية باختبار مواقعهم الإلكترونية بشكل نشط في الإصدار 108 من Chrome، وهو إصدار تجريبي اعتبارًا من 27 تشرين الأول (أكتوبر) 2022. ابحث تحديدًا عن العناصر التي تستخدم position: fixed و/أو تعتمد على الوحدات النسبية لإطار العرض.
يمكنك الإبلاغ عن الملاحظات والآراء على crbug.com. واحرص على تضمين "لوحة مفاتيح على الشاشة" في عنوان التقرير.