یکی از چالشهای طراحی سایت مدرن، اطمینان از نمایش صحیح سایت در تمام مرورگرها و دستگاهها است. وقتی یک وبسایت را روی iPhone یا iPad مشاهده میکنید، متوجه میشوید که نوار آدرس (Address Bar) و نوار وضعیت (Status Bar) به رنگ مورد انتظار شما تغییر نمیکنند، حتی اگر از متا تگهای استاندارد برای تغییر رنگ استفاده کرده باشید. این موضوع بهویژه زمانی که قصد دارید سایتتان با یک طراحی کاملاً هماهنگ و یکپارچه دیده شود، اهمیت پیدا میکند.
شرکت پرشیا وب، بهعنوان یک شرکت طراحی سایت در اصفهان، تجربه زیادی در زمینه بهینهسازی وبسایت برای موبایل و مرورگرهای مختلف دارد و در پروژههای خود، توجه ویژهای به جزئیات رابط کاربری و تجربه کاربری در iOS و Safari دارد. در ادامه، روش عملی و تستشده برای حل این مشکل را بررسی میکنیم.
متا تگهای اولیه برای تغییر رنگ
برای تغییر رنگ نوارها در مرورگرها معمولاً از متا تگهای زیر استفاده میکنیم:
<meta name="theme-color" content="#07070f">
<meta name="msapplication-navbutton-color" content="#07070f">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="#07070f">
این تگها به طور کلی برای تغییر رنگ نوار وضعیت و نوار ناوبری در مرورگرهای اندروید و Windows مفید هستند و در iOS بخشی از این کار را انجام میدهند. معمولاً نوار وضعیت تغییر رنگ میدهد، اما نوار آدرس همچنان به رنگ پیشفرض Safari باقی میماند.
راهکار عملی برای iOS Safari
بعد از بررسیهای متعدد و تست در پروژههای واقعی، روش زیر نتیجهبخش بوده است:
- تنظیم رنگ پسزمینه در body
یکی از مشکلات اصلی این است که رنگ پسزمینه<body>تعیین نشده است. مرورگر Safari برای تعیین رنگ نوار آدرس از رنگ پسزمینه body استفاده میکند. بنابراین لازم است که CSS زیر را اضافه کنید:
body {
background-color: #07070f;
}
رنگی که اینجا میدهید، باید همان رنگی باشد که در متا تگ theme-color یا رنگ طراحی اصلی سایت استفاده کردهاید.
- تنظیم متا تگ برای نوار وضعیت iOS
متا تگ زیر باعث میشود نوار وضعیت Safari روی iOS تغییر رنگ دهد و با پسزمینه body هماهنگ شود:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
گزینه black-translucent باعث میشود نوار وضعیت شفاف شده و رنگ پسزمینه body از زیر آن مشخص شود.
با این ترکیب، نوار وضعیت رنگ مناسب را دریافت میکند و نوار آدرس نیز هماهنگ با رنگ پسزمینه سایت نمایش داده میشود.
نکات تکمیلی
- همیشه رنگ
bodyرا مطابق رنگ اصلی طراحی سایت تعیین کنید تا هماهنگی کامل بین نوارها و محتوای صفحه برقرار شود. - گزینههای دیگر برای
apple-mobile-web-app-status-bar-styleشاملdefaultوblackهستند، اما معمولاًblack-translucentبهترین نتیجه را برای هماهنگی با رنگ سایت میدهد. - در صورت نیاز، میتوانید رنگها را در CSS :root و رنگهای حالت تاریک (
color-scheme: dark) نیز تعریف کنید تا تجربه کاربری در حالت شب بهبود یابد.
جمعبندی
اگرچه استفاده از متا تگها برای تغییر رنگ نوار آدرس و نوار وضعیت رایج است، اما بدون تعیین رنگ پسزمینه body، این تنظیمات در Safari iOS کامل عمل نمیکنند. روش عملی و تستشده این است که هم رنگ body و هم متا تگ apple-mobile-web-app-status-bar-style را بهدرستی تعریف کنید.
شرکت پرشیا وب با تجربه خود در طراحی سایتهای حرفهای و بهینهسازی برای موبایل، همیشه این نکات ظریف را رعایت میکند تا سایتهای طراحیشده علاوه بر زیبایی بصری، سازگاری کامل با مرورگرهای مختلف از جمله Safari روی iOS داشته باشند. استفاده از این روش به شما کمک میکند تجربه کاربری بهتری ارائه دهید و ظاهر سایتتان روی دستگاههای iPhone و iPad کاملاً هماهنگ و حرفهای باشد.
