ویرگول
ورودثبت نام
روزمرگی فنی
روزمرگی فنی
خواندن ۱ دقیقه·۳ ماه پیش

تغییر رنگ آدرس بار یا نوار بالای مرورگر در طراحی سایت

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

تغییر رنگ پیش‌فرض نوار بالای مرورگر
تغییر رنگ پیش‌فرض نوار بالای مرورگر

این قابلیت در بعضی مواقع می‌تواند به بهبود UI صفحات کمک کند و انجامش هم بسیار ساده است. برای گوگل کروم (و تمام مرورگرهای مبتنی بر Chromium مثل Opera، Edge و غیره) فقط کافیست که تگ متای زیر (با تغییر کد رنگ دلخواه) در قسمت head سایت قرار بگیرد:


<meta name="theme-color" content="#007bff">

این همان کاریست که ویرگول هم برای مثال انجام داده:

برای مرورگر فایرفاکس هم می‌توانید تگ متای زیر را استفاده کنید:

<meta name="msapplication-navbutton-color" content="#RRGGBB">

فقط به عنوان نکته آخر درنظر داشته باشید که این تگ متا فقط در مرورگر موبایل عمل می‌کند و نه دسکتاپ.


تغییر رنگ نوار بالای مرورگرhtmlمتا تگ theme coolorتغییر رنگ آدرس بار کرومui
روزها درگیر مصائب فنی، شب‌ها مشغول ثبت راه‌حل‌های یافتنی
شاید از این پست‌ها خوشتان بیاید