تغییر رنگ آدرس بار مرورگر هنگام نمایش سایت با موبایل

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

لازم به ذکر است که قابلیت تغییر رنگ نوار آدرس تنها در مرورگر گوگل کروم (مرورگر پیش فرض گوشی های اندروید) کار می کند و از نسخه 39 به گوگل کروم اضافه شده است.این قابلیت با افزودن یک خط کد به سربرگ سایت انجام می شود و در هر نوع وب سایتی قابل انجام است، بنابراین فرقی نمی کند که سایت شما PHP یا ASP یا حتی ایستا باشد.

چرا رنگ آدرس مرورگر تغییر می کند؟

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

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

چگونه رنگ مرورگر را برای کاربران موبایل تعیین کنیم؟

اگر کمی کدنویسی و HTML بلد باشید به راحتی این کار را انجام خواهید داد اما اگر بلد نیستید به آموزش ارائه شده در این قسمت توجه کنید زیرا بسیار ساده است.

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

در تصویر بالا یک کد 6 رقمی وجود دارد که تعیین کننده رنگی است که مرورگر شما باید در موبایل کاربر نمایش دهد، برای یافتن کد 6 رقمی مورد نظر خود می توانید از یک نرم افزار گرافیکی مانند Photoshop یا Paint استفاده کنید اما ما به شما آموزش می دهیم که چگونه این کار را با مرورگر کروم خود انجام دهید.

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

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

در این کادر یک پالت رنگی کامل وجود دارد که به شما این امکان را می دهد تا به راحتی رنگ مورد نظر خود را انتخاب کرده و کد 6 رقمی آن را در کادر زیر دریافت کنید. اکنون می توانید با قرار دادن این کد 6 رقمی در نمونه کد بالا و در نهایت قرار دادن آن در هدر سایت خود، جلوه بهتری از طراحی سایت خود را به کاربران موبایل نشان دهید.

آیا فکر می کنید تغییر رنگ مرورگر کاربر هنگام دسترسی به سایت شما جلب توجه می کند؟ وقتی برای اولین بار دیدی چه فکری کردی؟