تسهّل المتصفّحات الحديثة تخصيص مكوّنات معيّنة، مثل الرموز ولون شريط العناوين، وكذلك إضافة عناصر مثل المربّعات المخصّصة. ويمكن لهذه التعديلات البسيطة أن تزيد التفاعل وتجذب المستخدمين مرة أخرى إلى موقعك الإلكتروني.
تسهّل المتصفّحات الحديثة تخصيص مكوّنات معيّنة، مثل الرموز ولون شريط العناوين، وكذلك إضافة عناصر مثل المربّعات المخصّصة. ويمكن لهذه التعديلات البسيطة أن تزيد التفاعل وتجذب المستخدمين مرة أخرى إلى موقعك الإلكتروني.
توفير رموز ومربّعات رائعة
عندما يزور أحد المستخدمين صفحة الويب، يحاول المتصفّح جلب رمز من 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.
لا يُنصح بتضمين نُسخ متعددة باستخدام سمة 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 ساحل تحديد وألوان عناصر المتصفح، وحتى النظام الأساسي الذي يستخدم العلامات الوصفية.
لون مظهر وصفي في 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
تغيير مظهر شريط الحالة
يمكنك تغيير مظهر شريط الحالة التلقائي إلى black أو
black-translucent عند استخدام black-translucent، يطفو شريط الحالة في الأعلى
لعرض المحتوى بملء الشاشة، بدلاً من دفعه للأسفل هذا يعطي التخطيط
مرتفعًا، ولكنه يحجب الجزء العلوي. إليك الرمز المطلوب:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black