تغيير حجم شريط عناوين URL

ديفيد بوكان

يتم تغيير سلوك تغيير حجم شريط عناوين URL في Chrome على نظام التشغيل Android بدءًا من الإصدار 56. في ما يلي معلومات مفيدة يجب معرفتها:

ولن يتم تغيير حجم الأطوال المحددة في وحدات إطار العرض (أي vh) استجابةً لاستجابة شريط عنوان URL المعروض أو المخفي. وبدلاً من ذلك، سيتم ضبط حجم وحدات vh على ارتفاع إطار العرض كما لو كان شريط عنوان URL مخفيًا دائمًا. وهذا يعني أنه سيتم ضبط حجم وحدات vh على "أكبر إطار عرض ممكن". يعني ذلك أنّ 100vh سيكون أكبر من الارتفاع المرئي عند عرض شريط عنوان URL.

الكتلة المتضمّنة الأولية (ICB) هي الجذر الذي يحتوي على الكتلة المستخدَمة عند تغيير حجم العناصر بالنسبة إلى عناصرها الرئيسية. على سبيل المثال، يؤدي منح العنصر <html> نمط width: 100%; height: 100% إلى جعله بالحجم نفسه لقياس ICB. من خلال هذا التغيير، لن يتم تغيير حجم ICB عندما يكون شريط عنوان URL مخفيًا. بدلاً من ذلك، سيظل الارتفاع نفسه، كما لو كان شريط عنوان URL يظهر دائمًا ("أصغر إطار عرض ممكن"). هذا يعني أن أي عنصر بحجم يصل إلى ارتفاع ICB لن يملأ الارتفاع المرئي بالكامل عندما يكون شريط عنوان URL مخفيًا.

هناك استثناء واحد للتغييرات المذكورة أعلاه وهو العناصر الخاصة بالعناصر position: fixed. ولن يتم تغيير سلوك المستخدمين. وهذا يعني أنّه سيتم تغيير حجم عنصر position: fixed الذي يحتوي على كتلته عبارة عن رمز ICB وذلك استجابةً لعرض أو إخفاء شريط عنوان URL. على سبيل المثال، إذا كان ارتفاعه 100%، سيتم ملء الارتفاع المرئي بالضبط، سواء تم عرض شريط عنوان URL أم لا. وبالمثل بالنسبة إلى أطوال vh، سيتم تغيير حجمها أيضًا لتطابق الارتفاع المرئي مع مراعاة موضع شريط عنوان URL.

وهناك بضعة أسباب لهذا التغيير:

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

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

  • تم تحسين إمكانية التشغيل التفاعلي مع Safari على نظام التشغيل iOS. يجب أن يتطابق النموذج الجديد مع سلوك Safari، مما يجعل الحياة أسهل لمطوري الويب. كان الخيار غير البديهي المتمثل في جعل وحدات vh أكبر إطار عرض ممكن في حين أنّ خوارزمية ICB الأصغر حجمًا ممكنة هي مطابقة سلوك متصفّح Safari.

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

عرض توضيحي

  • إليك هذا العرض التوضيحي. تمثّل الأشرطة الأربعة على يسار الصفحة كل المجموعات المحتملة للترميز 99% و99vh وposition:fixed وposition:absolute، ويتم عرضها في صفحة قابلة للتمرير. يؤدي إخفاء شريط عناوين URL إلى عرض مدى تأثير ذلك على كل عنوان منهما. تتم طباعة أحداث تغيير الحجم أسفل الصفحة.

الدعم

  • Chrome 56 على Android.