تغییر اندازه نوار URL

David Bokan

رفتار تغییر اندازه نوار URL در Chrome در Android از نسخه 56 در حال تغییر است. آنچه باید بدانید در اینجا آمده است:

طول های تعریف شده در واحدهای viewport (یعنی 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 به این معنی بود که هر بار که کاربر جهت پیمایش را تغییر می‌دهد، صفحه به‌طور نامفهومی جریان می‌یابد.

  • تجربه کاربری بهبود یافته اگر صفحه ای در حین مطالعه مجدد جریان یابد، ممکن است موقعیت نسبی خود را در سند از دست بدهد. این ناامید کننده است، اما همچنین باعث استفاده اضافی از پردازنده و تخلیه باتری برای تغییر صفحه و رنگ آمیزی مجدد صفحه می شود.

  • قابلیت همکاری با سافاری در iOS بهبود یافته است. مدل جدید باید با رفتار سافاری مطابقت داشته باشد و زندگی را برای توسعه‌دهندگان وب آسان‌تر کند. انتخاب غیرمنطقی برای تبدیل واحدهای vh به بزرگترین نمای ممکن اما ICB کوچکترین امکان مطابقت با رفتار سافاری است.

برای سناریوهای تمام صفحه، که در آن نوار URL به حالت پنهان قفل شده است، ICB از ارتفاع تمام صفحه استفاده می کند. این با تعاریف بالا مطابقت دارد زیرا "کوچکترین نمای ممکن" نمای کامل خواهد بود زیرا نوار URL در اسکرول نشان داده نمی شود.

نسخه ی نمایشی

  • اینجا یک تظاهرات است. چهار نوار در سمت راست صفحه همه ترکیب‌های ممکن 99% ، 99vh ، position:fixed و position:absolute هستند که در یک صفحه قابل پیمایش ارائه شده‌اند. پنهان کردن نوار URL نشان می دهد که چگونه روی هر کدام تأثیر می گذارد. رویدادهای تغییر اندازه در صفحه چاپ می شوند.

حمایت کردن

  • کروم 56 در اندروید.