يتغير سلوك تغيير حجم شريط عناوين 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 مدى تأثيره في كل عنوان منها. تتم طباعة الأحداث لتغيير حجم الأحداث أسفل الصفحة.
الدعم
- الإصدار 56 من Chrome على نظام التشغيل Android