Modern tarayıcılar, simgeler ve adres çubuğu rengi gibi belirli bileşenleri özelleştirmeyi ve hatta özel bölümler gibi öğeleri eklemeyi kolaylaştırır. Bu basit ince ayarlarla etkileşimi artırabilir ve kullanıcıların sitenize geri gelmesini sağlayabilirsiniz.
Modern tarayıcılar, simgeler ve adres çubuğu rengi gibi belirli bileşenleri özelleştirmeyi ve hatta özel bölümler gibi öğeleri eklemeyi kolaylaştırır. Bu basit ince ayarlarla etkileşimi artırabilir ve kullanıcıların sitenize geri gelmesini sağlayabilirsiniz.
Muhteşem simgeler ve kutular sağlayın
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 edilen) sekme sayfası gibi birçok yerde görünebilir.
Yüksek kaliteli bir resim sunmak, sitenizin daha tanınmasını sağlar ve bulmalarını kolaylaştırır.
Tüm tarayıcıları tam olarak desteklemek için <head>
öğesi oluşturun.
<!-- 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, icon.png kullanır. Bu veri aracı,
için geçerlidir. Otomatik ölçeklendirmeyi önlemek için
sizes özelliğini belirterek beden değerlerini değiştirebilirsiniz.
Safari
Safari, rel özelliğiyle <link> etiketini de kullanıyor: apple-touch-icon to
ana ekran simgesini belirtin.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
180 veya 192 piksel kare boyutunda, şeffaf olmayan bir PNG dosyası, apple-touch-icon için idealdir.
sizes özelliği aracılığıyla birden fazla sürüm eklenmesi önerilmez.
iOS için Safari daha önce, kaçınılması gereken -precomposed anahtar kelimesini dikkate alıyordu
ancak iOS 7'den bu yana gerek kalmadı.
Internet Explorer ve Windows Phone
Windows 8'in yeni ana ekran deneyimi ve dört simge gerektiriyor. İlgili meta etiketlerini kullanabilirsiniz.
<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'daki karolar
Microsoft’un "Sabitlenmiş Siteleri" "Canlı Kartlar"ı döndürme diğerlerinin çok ötesine bazı uygulamalar vardır ve bunlar bu kılavuzun kapsamı dışındadır. Web sitemiz g.co/newsinitiative/labs üzerinden MSDN'de canlı karolar oluşturmayı öğrenin.
Tarayıcı öğelerini renklendirme
Farklı meta öğeleri kullanarak, tarayıcıyı ve
bazı unsurlar da mevcut. Bazılarının yalnızca belirli
platformlar veya tarayıcılardır, ancak deneyimi büyük ölçüde geliştirebilir.
Chrome, Firefox OS, Safari, Internet Explorer ve Opera Coast tanımlarını tanımlamanıza olanak sağlar. tarayıcı öğelerinin ve hatta meta etiketlerin kullanıldığı platformun renklerini ayarlayın.
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ğunun stilini belirlemenize ve bir başlangıç resmi belirtmenize olanak tanır.
Başlangıç resmi belirtin
Safari, yükleme süresinde ve birden fazla yükleme sonrasında varsayılan olarak boş ekran gösteriyor
uygulamanın önceki durumunun ekran görüntüsünü yükler. Bu durumu önlemek için
bir bağlantı etiketi ekleyerek Safari'ye açık bir başlangıç resmi göstermesini bildirmek için
rel=apple-touch-startup-image Örneğin:
<link rel="apple-touch-startup-image" href="icon.png">
Görsel, hedef cihaz ekranının özel boyutunda olmalıdır. kullanılmayacak. Referans Safari Web İçeriği Yönergeleri inceleyebilirsiniz.
Apple'ın bu konuda çok az belge sunması olsa da geliştirici topluluğu , kullanıcıları hedeflemek için gelişmiş medya sorguları kullanarak tüm cihazları hedeflemenin bir yolunu uygun cihazı seçip doğru resmi belirtin. Buradan çalışan bir çözümdür. tfausak'ın özeti
Durum çubuğu görünümünü değiştirme
Varsayılan durum çubuğunun görünümünü black olarak değiştirebilirsiniz veya
black-translucent. black-translucent ile durum çubuğu üstte kayar
tam ekran içeriğini aşağı itmek yerine. Bu şekilde düzen,
ancak üst tarafı engeller. Gerekli kod:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent kullanarak ekran görüntüsü alma
black kullanarak ekran görüntüsü alma