Modern tarayıcılar, simgeler ve adres çubuğu rengi gibi belirli bileşenleri özelleştirmeyi, hatta özel kutular gibi öğeleri eklemeyi kolaylaştırır. Bu basit ince ayarlar, etkileşimi artırabilir ve kullanıcıların sitenize geri gelmelerini sağlayabilir.
Modern tarayıcılar, simgeler ve adres çubuğu rengi gibi belirli bileşenleri özelleştirmeyi, hatta özel kutular gibi öğeleri eklemeyi kolaylaştırır. Bu basit ince ayarlar, etkileşimi artırabilir ve kullanıcıların sitenize geri gelmelerini sağlayabilir.
Etkileyici simgeler ve kutular sağlayın
Bir kullanıcı web sayfanızı ziyaret ettiğinde, tarayıcı HTML'den bir simge getirmeye çalışır. Simge; tarayıcı sekmesi, son uygulama geçişi, yeni (veya son ziyaret edilenler) sekme sayfası gibi pek çok yerde görünebilir.
Yüksek kaliteli bir resim sağladığınızda siteniz daha tanınır olur ve kullanıcıların sitenizi bulması kolaylaşır.
Tüm tarayıcıları tam olarak desteklemek için her sayfanın <head> öğesine birkaç etiket eklemeniz gerekir.
<!-- 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 ve Opera
Chrome ve Opera, cihaz tarafından gerekli boyuta ölçeklenen icon.png özelliğini kullanır. Otomatik ölçeklendirmeyi önlemek için sizes özelliğini belirterek ek boyutlar da sağlayabilirsiniz.
Safari
Safari, ana ekran simgesini belirtmek için rel özelliğine sahip <link> etiketini de kullanır: apple-touch-icon.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
apple-touch-icon için 180 piksel veya 192 piksel büyüklüğünde şeffaf olmayan bir PNG idealdir.
sizes özelliği aracılığıyla birden fazla sürüm eklemeniz önerilmez.
Daha önce iOS için Safari, görsel efekt eklemekten kaçınmak için -precomposed anahtar kelimesini dikkate alıyordu, ancak iOS 7'den itibaren bu durum gerekli değildi.
Internet Explorer ve Windows Phone
Windows 8'in yeni ana ekran deneyimi, sabitlenmiş siteler için dört farklı düzeni destekler ve dört simge gerektirir. Belirli bir boyutu desteklemek istemiyorsanız ilgili meta etiketleri hariç tutabilirsiniz.
<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'da kutucuklar
Microsoft'un "Sabitlenmiş Siteleri" ve dönüşümlü "Canlı Karolar", diğer uygulamaların çok ötesine geçer ve bu kılavuzun kapsamı dışındadır. MSDN'nin canlı karo oluşturma bölümünden daha fazla bilgi edinebilirsiniz.
Renkli tarayıcı öğeleri
Farklı meta öğeleri kullanarak tarayıcıyı ve hatta platformun öğelerini özelleştirebilirsiniz. Bunlardan bazılarının yalnızca belirli platformlarda veya tarayıcılarda çalışabileceğini, ancak deneyimi önemli ölçüde geliştirebileceklerini unutmayın.
Chrome, Firefox OS, Safari, Internet Explorer ve Opera Kıyısı, meta etiketler kullanarak tarayıcı öğeleri ve hatta platform için renkler tanımlamanızı sağlar.
Chrome ve Opera için Meta Tema Rengi
Android'de Chrome'un tema rengini belirtmek için meta tema rengini kullanın.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari'ye özgü stil
Safari, durum çubuğu stilini belirlemenize ve bir başlangıç resmi belirtmenize olanak tanır.
Başlangıç resmi belirtme
Varsayılan olarak, Safari yükleme süresi boyunca ve birden fazla yükleme işleminden sonra uygulamanın önceki durumunun ekran görüntüsünü boş bir ekran gösterir. Bu durumu, Safari'nin rel=apple-touch-startup-image ile bir bağlantı etiketi ekleyerek açık bir başlangıç resmi göstermesini söyleyerek bunu önleyebilirsiniz. Örneğin:
<link rel="apple-touch-startup-image" href="icon.png">
Resim, hedef cihaz ekranının belirli boyutunda olmalıdır. Aksi takdirde kullanılmaz. Daha fazla ayrıntı için Safari Web İçeriği Yönergeleri'ne bakın.
Apple'ın bu konudaki belgeleri çok az olsa da geliştirici topluluğu, uygun cihazı seçmek ve ardından doğru resmi belirtmek için gelişmiş medya sorguları kullanarak tüm cihazları hedeflemenin bir yolunu buldu. İşte tfausak'ın gist eseriyle çalışan bir çözüm
Durum çubuğunun görünümünü değiştirme
Varsayılan durum çubuğunun görünümünü black veya black-translucent olarak değiştirebilirsiniz. black-translucent ile durum çubuğu aşağı itmek yerine tam ekran içeriğinin üzerinde kayar. Bu, düzene daha fazla yükseklik
sağlar ancak üst kısmı engeller. Gerekli kod:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent kullanılıyor
black kullanılıyor