Ben dahil birçoğumuzun bu konudan yeni haberdar olduğundan eminim neredeyse. Resme bakınca zaten konumuzun ne demek olduğunu da anlayabiliyoruz az çok. Bu özelliğin ne zaman çıktığını da soracak olursanız tesadüfen karşılaştım desem yeridir. Çok uzun süredir web teknolojilerinden uzak kaldığımdan olsa gerek. Bu yüzden konuya ait etiketin ne zaman yayınlandığı hakkında bilgi veremeyeceğim maalesef.
Ara sıra cep telefonuyla ziyaret ettiği sitelerde tarayıcı renginin banner rengiyle aynı oluğunu fark etmiştim. Aslında ilk gördüğümde ziyaret ettiğim sitenin mobil uygulaması açıldığını sanmıştım bi an. Meğerse binlerce site tarafından da kullanılan bir özellikmiş.
Chrome, Firefox, Opera, Windows Phone, iOS Safari tarayıcılarının mobil sürümlerinden ziyaret ettiğiniz sitelerde tarayıcı browser (tarayıcı) rengini değiştirebilen çok kısa bir kod mevcut ve kullanımı da oldukça basittir. Yapmanız gereken sadece site tasarımınıza uygun renk kodunu bulup altta vereceğim kodlar içine eklemek. Html renk kodları (Hex, Hsb, Rgb) yazıdan html renk kodlarını bulabilir ayrıca kendi tasarımınıza uygun kodu da yazı içinde gömülü olan kod editöründen inceleyerek temin edebilirsiniz.
Site tasarımınıza uygun ve #1db954 rakamları gibi olan renk kodunu aşağıdakilerle değiştirmeniz gerek. Ayrıca IOS Safari için de rengin ismini yazmanız gerekiyor. Benim eklediğim rengin ismi SeaGreen. Üstte verdiğim linkte renklerin isimlerini de temin edebilirsiniz.
Düzeltme yaptığınız kodları kopyalayıp olduğu gibi sitenizin head etiketleri arasına yerleştirmeniz gerekiyor.
<!-- Chrome, Firefox OS ve Opera -->
<meta name="theme-color" content="#1a1f2b">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#1a1f2b">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="Black">
Kimilerine göre gereksiz gibi görünse de mobil cihazlardan sitenizi ziyaret eden kişiler web sitesi değil de android uygulama kullanıyorlarmış gibi kendilerini rahat hissedeceklerinden emin olabilirsiniz. Ayrıca siteye de ayrı bir güzellik kattığı da oluyor bu basit kodlar yardımıyla.
Head etiketleri dendiğinde herkesin anlayacağını zannetmiştim. Bu yüzden kusuruma bakmayın. Head etiketleri webaitemizin en üst kısmında bulunan ve görünmeyen bölümdür. Bu bölümde websitemizin style.css dosyaları js dosyaları favicon.ico dosyaları ve title gibi bölümler vardır. En çok da bilinen meta keyword etiketlerinin olduğu yerdir. Verdiğim kodları olduğu gibi bu bölüme yerleştirdiğinizde siteniz bu kodlara uyumlu hale gelecektir. Php veya asp için uyarlama gibi bir ihtiyacı yoktur kodların. Olduğu gibi kopyalayıp yapıştırmanız yeterli olacaktır. Eğer hala nereye yerleştireceğinizi bulamadıysanız sitenizin kaynak kodlarından <head> kelimesini aratıp bulduktan sonra altına yapıştırın kodu. Tam altına ekleseniz bile çalışır kodlar
prestigeplayer paylaşımı altında 13 fikir paylaşıldı.