Simgeler ve tarayıcı renkleri

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.

Paul Bakaus
Paul Bakaus

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">
Chrome&#39;daki adres çubuğunu şekillendiren tema renkleri.

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">

Siyah şeffaf ekran görüntüsü kullanılıyor.
black-translucent kullanarak ekran görüntüsü alma

Siyah ekran görüntüsü
black kullanarak ekran görüntüsü alma