تغییر رنگ هدر مرورگر های جدید موبایل

به نام خدا

سلام خدمت دوستان عزیز، در این مطلب با یک آموزش بسیار ساده و در عین حال جالب از دنیای وب و موبایل در خدمت شما هستم.

 

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

 

این قابلیت میتونه برای کاربر شما بسیار خوشایند باشه، چون کاربر احساس میکنه که تلفنش با سایت شما هماهنگ شده و از پیمایش سایت شما لذت میبره.

ابتدا بزارید حالت عادی رو بررسی کنیم. در تصویر زیر صفحه اصلی وبسایت ویکیپدیا رو مشاهده میکنید. اگر به قسمت بالای مرورگر نگاه کنید (همونجایی که آدرس سایت نوشته شده) مشاهده میکنید که نوار اعلان به رنگ سیاه هست و نوار آدرس هم به رنگ سفید:

صفحه اصلی وبسایت ویکی پدیا در مرورگر اندروید لالی پاپ

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

صفحه اصلی وبسایت پیورلینک در مرورگر اندروید لالی پاپ

این تغییر بسیار ساده با سه خط کد HTML قابل پیاده سازی هست:

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

همونطور که در کامنت ها مشاهده میکنید برای مرورگرها و موبایل های مختلف میشه از این کد استفاده کرد و میتونید رنگ دلخواه خودتون رو در صفت content قرار بدید.

نکته ی مهمی که باید توجه داشته باشید اینه که این قابلیت به تازگی روی مرورگرهای موبایل قرار گرفته و نسخه های قدیمی تر ممکنه که این قابلیت رو ساپورت نکنن.

 

امیدوارم که از این مطلب لذت برده باشید و اگه نظری داشتید بگید.

موفق و موید باشید.

برچسب ها: مرورگر, موبایل, رنگ, هدر

چاپ

نوشتن دیدگاه


تصویر امنیتی
تصویر امنیتی جدید