تسهّل المتصفّحات الحديثة تخصيص مكوّنات معيّنة، مثل الرموز ولون شريط العناوين، وحتى إضافة عناصر مثل المربّعات المخصّصة. يمكن لهذه التعديلات البسيطة أن تزيد من التفاعل وتجذب المستخدمين مجددًا إلى موقعك الإلكتروني.
تسهّل المتصفّحات الحديثة تخصيص مكوّنات معيّنة، مثل الرموز ولون شريط العناوين، وحتى إضافة عناصر مثل المربّعات المخصّصة. يمكن لهذه التعديلات البسيطة أن تزيد من التفاعل وتجذب المستخدمين مجددًا إلى موقعك الإلكتروني.
تقديم رموز ومربّعات رائعة
عندما يزور مستخدم صفحة الويب، يحاول المتصفّح جلب رمز من HTML. قد يظهر الرمز في أماكن متعددة، بما في ذلك علامة تبويب المتصفّح، ومبدّل التطبيقات الحديثة، وصفحة علامة التبويب الجديدة (أو التي تمت زيارتها مؤخرًا)، والمزيد.
إنّ توفير صورة عالية الجودة سيجعل موقعك الإلكتروني أكثر تميّزًا، ما يسهّل على المستخدمين العثور عليه.
لإتاحة جميع المتصفحات بالكامل، عليك إضافة بعض العلامات إلى العنصر <head> في كل صفحة.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
متصفّح Chrome وOpera
يستخدم Chrome وOpera السمة icon.png، والتي يتم تغيير حجمها إلى الحجم المطلوب من خلال الجهاز. لمنع التدرّج التلقائي، يمكنك أيضًا تقديم أحجام إضافية من خلال تحديد السمة sizes.
Safari
يستخدم Safari أيضًا علامة <link> مع السمة rel: apple-touch-icon للإشارة إلى رمز الشاشة الرئيسية.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
يُعدّ ملف PNG غير شفاف بحجم 180 بكسل أو 192 بكسل مربّع مثاليًا لرمز apple-touch-icon.
لا يُنصح بتضمين نُسخ متعددة من خلال السمة sizes.
في السابق، كان متصفّح Safari لنظام التشغيل iOS يعتبر الكلمة الرئيسية -precomposed لتجنّب إضافة تأثيرات مرئية، ولكن لم يعد ذلك ضروريًا منذ الإصدار iOS 7.
Internet Explorer وWindows Phone
تتيح تجربة الشاشة الرئيسية الجديدة في نظام التشغيل Windows 8 أربعة تنسيقات مختلفة للمواقع الإلكترونية المثبّتة، وتتطلّب أربعة رموز. ويمكنك استبعاد العلامات الوصفية ذات الصلة إذا كنت لا تريد إتاحة حجم معيّن.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
المربّعات في Internet Explorer
تتجاوز ميزتا "المواقع الإلكترونية المثبّتة" و "المربّعات الحيّة" الدوّارة من Microsoft بكثير عمليات التنفيذ الأخرى، وهما خارج نطاق هذا الدليل. يمكنك معرفة المزيد على صفحة MSDN كيفية إنشاء مربّعات حية.
تلوين عناصر المتصفّح
باستخدام عناصر meta مختلفة، يمكنك تخصيص المتصفّح وحتى عناصر النظام الأساسي. يُرجى العِلم أنّ بعضها قد يعمل فقط على منصات أو متصفّحات معيّنة، ولكنّها يمكن أن تحسّن التجربة بشكل كبير.
تتيح لك متصفحات Chrome وFirefox OS وSafari وInternet Explorer وOpera Coast تحديد ألوان لعناصر المتصفح، وحتى للنظام الأساسي باستخدام العلامات الوصفية.
لون المظهر الوصفي لمتصفّحَي Chrome وOpera
لتحديد لون المظهر في Chrome على Android، استخدِم لون المظهر الوصفي.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
تنسيق خاص بمتصفّح Safari
يتيح لك Safari تصميم شريط الحالة وتحديد صورة بدء التشغيل.
تحديد صورة بدء التشغيل
يعرض Safari تلقائيًا شاشة فارغة أثناء وقت التحميل وبعد عدة
عمليات تحميل، يعرض لقطة شاشة للحالة السابقة للتطبيق. يمكنك منع ذلك من خلال
إخبار Safari بعرض صورة بدء تشغيل صريحة، عن طريق إضافة علامة رابط، باستخدام
rel=apple-touch-startup-image. على سبيل المثال:
<link rel="apple-touch-startup-image" href="icon.png">
يجب أن تكون الصورة بالحجم المحدّد لشاشة الجهاز المستهدَف، وإلا لن يتم استخدامها. يُرجى الرجوع إلى إرشادات المحتوى على الويب في Safari لمزيد من التفاصيل.
على الرغم من أنّ مستندات Apple حول هذا الموضوع قليلة، فقد توصّل منتدى المطوّرين إلى طريقة لاستهداف جميع الأجهزة باستخدام طلبات البحث المتقدّمة عن الوسائط لاختيار الجهاز المناسب ثم تحديد الصورة الصحيحة. إليك حلاً ناجحًا، بفضل tfausak's gist
تغيير مظهر شريط الحالة
يمكنك تغيير مظهر شريط الحالة التلقائي إلى black أو black-translucent. في الإصدار black-translucent، يظهر شريط الحالة في أعلى
محتوى ملء الشاشة، بدلاً من دفعه للأسفل. يمنح هذا التخطيط مزيدًا من الارتفاع،
ولكنه يعيق الجزء العلوي. في ما يلي الرمز المطلوب:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black"