Lollipop'un en yeni Chrome sürümünde başlık çubuğunun ve adres çubuğunun rengi nasıl değiştirilir?

578

Bu konuda henüz bir şey bulamadık. Genel Bakış'ta adres çubuğunun ve başlık renginin rengini değiştirme yeteneğini gerçekten seviyorum? Bunu yapmanın kolay bir yolu var mı?

Android için Chrome resim açıklamasını buraya girin .

Bunun çalışması için Android 5.0 Lollipop'a ve Chrome'un Birleştirme Sekmeleri ve Uygulamaları Açık olarak ayarlanmış olduğunu düşünüyorum .

android html google-chrome

— Arpad Gabor
kaynak

Ocak 2016 itibarıyla Sekmeleri Birleştir seçeneğine artık bunun çalışması için (Lollipop'ta) gerek yok.

— Skuld

1

Şimdi KitKat için de böyle ..

— Revetahw diyor Reinstate Monica

@Skuld "Son uygulamalar" görünümünde rengi görmek için Sekmeleri Birleştirmeniz gerekir, ancak "Sekmeleri ve Uygulamaları Birleştir" seçeneğini devre dışı bırakmış olsanız bile, web sitesini Chrome'da görüntülerken rengi görebilirsiniz. Ancak umarım bunu bir gün düzeltirler, böylece Chrome içindeki sekmeler listesi ("Sekmeleri ve Uygulamaları Birleştir" devre dışı bırakıldığında gösterilir) de donuk gri yerine tema rengini görüntüler.

— ADTC

1

@ADTC sekmelere geçtiğinizde renk kaybeder mi diyorsunuz? Eğer öyleyse evet, ideal değil ama sekmeye tıkladığınızda rengi yeniden kazandığı için gerçekten büyük bir anlaşma değil. Büyük şey, bakıldığında web sitesinin doğru renge sahip olması :)

— Skuld

1

@Skuld, "Sekmeleri ve Uygulamaları Birleştir" kapalıyken , sekmeleri değiştirdiğinizde bu görünümü (bağlantı) alırsınız . Bu görünümde, tüm sekmeler gri renktedir. Tema rengi bu görünümde kalsaydı iyi olurdu. "Uygulama benzeri sekme" "Birleştirme Sekmeler ve Uygulamalar" açıldığında tema rengi vardır nasıl benzer üzerinde ve uygulama değiştiricisini açın. (PS: Şahsen birleşmekten nefret ediyorum çünkü çok sayıda >.<

— sekmem

791

Biraz arama yaptıktan sonra çözümü buldum.

İçeriğinize HEX kodunuzu içerik değeri olarak içeren bir <meta>etiket eklemeniz gerekir . Örneğin:<head>name="theme-color"

<meta name="theme-color" content="#999999" />

— Arpad Gabor
kaynak

19

Teşekkürler. Checkout ayrıca html5rocks daha fazla bilgi için: updates.html5rocks.com/2014/11/…

— redochka

4

Chrome'da bunu devre dışı bırakacak herhangi bir ayar var mı? Renkli adres çubuğuna dayanamıyorum. Sadece varsayılan rengi istiyorum.

— James

@James - bu sizin gibi bir düzeltme olmayabilir, ancak 'Sekmeleri uygulamalarla birleştir' ayarını kapatarak renk değişikliğini durdurabilirsiniz.

— Novocaine

4

Gerçekten mi? 'Sekmeleri uygulamalarla birleştir' ayarı kapalıyken Marshmallow kullanıyorum, ancak adres çubuğu hala renklidir. Belki 'hatayı düzelttiler'.

— user711413

3

Onaltılık bir renk olması gerekmez, geçerli herhangi bir CSS rengi çalışır.

— Bogdan M.

500

metaAndroid, iPhone ve Windows Phone'u desteklemek için aslında 3 etikete ihtiyacınız var

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

— Edoardo L'Astorina
kaynak

Peki ya yükleme çubuğu? Ben üst çubuğu karanlık ve yükleme çubuğu beyaz yapan web siteleri gördüm, ama kod analiz snippet bulamıyor musunuz?

— Newbie

19

Not : Apple'ın geliştirici notlarına göre : "Bu meta etiketin, önce açıklandığı gibi tam ekran modunu belirtmediğiniz sürece hiçbir etkisi yoktur apple-apple-mobile-web-app-capable."

— Yan Foto

@YanFoto aslında çok yararlı bir bilgi. Bunu nasıl yaparsınız?

— viriato

44

İOS apple-mobile-web-app-status-bar-styleyalnızca destekleri özellik black, black-translucent or default` - Eğer özel bir renk kullanamazsınız.

— sixones

2

Eğer kullanırsanız black-translucent, üst çubuğu beyaz metinle şeffaf hale getirecektir, bu muhtemelen daha sonra ne olacağınızdır

— 99 Sorun - Sözdizimi bir tane değil

93

Örneğin, arka planı favori / Marka renginize göre ayarlamak için

HEAD Bölümündeki HTML kodunuza Below Meta özelliğini ekleyin

<head>
  ...
  <meta name="theme-color" content="Your Hexadecimal Code">
  ...
</head>

Misal

<head>
  ...
  <meta name="theme-color" content="#444444">
  ...
</head>

Aşağıdaki Resimde, Chrome'un tema rengi Mülkünüzü nasıl aldığından bahsettim

Firefox OS, Safari, Internet Explorer ve Opera Sahili, tarayıcının öğeleri ve hatta meta etiketleri kullanarak platform için renkler tanımlamanıza izin verir.

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Safari'ye özgü stil

Kılavuzlardan İşte Belgeler

Safari Kullanıcı Arabirimi Bileşenlerini Gizleme

Tek başına modu açmak için apple-mobile-web-app özellikli meta etiketi evet olarak ayarlayın. Örneğin, aşağıdaki HTML web içeriğini bağımsız mod kullanarak görüntüler.

<meta name="apple-mobile-web-app-capable" content="yes">

Durum Çubuğu Görünümünü Değiştirme

Varsayılan durum çubuğunun görünümünü siyah veya yarı saydam olarak değiştirebilirsiniz. Siyah yarı saydam ile durum çubuğu, aşağı itmek yerine tam ekran içeriğinin üzerinde yüzer. Bu, düzene daha fazla yükseklik verir, ancak üst kısmı engeller. Gerekli kod şöyledir:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Durum çubuğu görünümü hakkında daha fazla bilgi için, bkz. Apple-mobile-web-app-status-bar-style.

Örneğin:

Siyah saydam kullanarak ekran görüntüsü

Siyah kullanarak ekran görüntüsü

— Ravi Delixan
kaynak

42

Gönderen Resmi belgelere ,

Örneğin, arka plan rengini turuncuya ayarlamak için:

<meta name="theme-color" content="#db5945">

Ayrıca, Chrome sağlandığında yüksek çözünürlüklü güzel favicons gösterecektir. Android için Chrome, sağladığınız en yüksek çözünürlük simgesini seçer ve 192 × 192 piksel PNG dosyası sağlamanızı öneririz. Örneğin:

<link rel="icon" sizes="192x192" href="nice-highres.png">

— Deval Khandelwal
kaynak

22

ilgisiz bilgi eklemenin yanı sıra bu orijinal yanıtla aynıdır

— igorsantos07

9

@ igorsantos07 Sadece resmi belgelere bağlantı eklemek istedim. İşte bu

— Deval Khandelwal

4

Belgelere bir bağlantının seçilen cevapta eksik olan şey olduğunu düşündüm. Buraya geldiğimde bunun için çalışıyordum. Teşekkür ederim.

— Justin Force

Bu gereksiz

— taimur alam