Jak zmienić kolor paska nagłówka i paska adresu w najnowszej wersji Chrome na Lollipop?

Jeszcze nic nie znalazłem na ten temat. Naprawdę podoba mi się możliwość zmiany koloru paska adresu i koloru nagłówka na przeglądzie? Czy jest na to jakiś łatwy sposób?

Chrome dla AndroidaTutaj wpisz opis obrazka.

Myślę, że potrzebujesz Androida 5.0 Lollipop, aby to działało, a Chrome Połącz karty i aplikacje Ustaw na na.

Author: Kling Klang, 2014-11-16

4 answers

Znalazłem rozwiązanie po kilku poszukiwaniach.

Musisz dodać znacznik <meta> w <head> zawierający name="theme-color", z kodem szesnastkowym jako wartością zawartości. Na przykład:

<meta name="theme-color" content="#999999" />
 674
Author: Arpad Gabor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-10 05:18:55

Potrzebujesz 3 meta tagi do obsługi Androida, iPhone ' a i Windows Phone

<!-- 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">
 409
Author: Edoardo L'Astorina,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-17 13:20:34

Na przykład, aby ustawić tło na swój ulubiony / Branding kolor

Dodaj poniżej meta właściwość do kodu HTML w sekcji HEAD

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

Przykład

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

W poniższym obrazku, właśnie wspomniałem, jak Chrome wziął swoją właściwość theme-color

Tutaj wpisz opis obrazka

Firefox OS, Safari, Internet Explorer i Opera pozwalają definiować kolory elementów przeglądarki, a nawet platformy za pomocą meta tagów.

<!-- 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 specyficzna stylizacja

Z wytycznych dokumenty tutaj

Ukrywanie Komponentów Interfejsu Użytkownika Safari

Ustaw meta tag obsługujący apple-mobile-web-app na tak, aby włączyć tryb autonomiczny. Na przykład poniższy kod HTML wyświetla zawartość sieci web w trybie autonomicznym.

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

Zmiana wyglądu paska stanu

Można zmienić wygląd domyślnego paska stanu na czarny lub czarny-przezroczysty. Z czarnym-półprzezroczystym, pasek stanu unosi się na górze zawartości pełnoekranowej, a nie spycha ją w dół. Daje to układ większą wysokość, ale zasłania górę. Oto wymagany kod:

<meta name="apple-mobile-web-app-status-bar-style" content="black">
Aby uzyskać więcej informacji na temat wyglądu paska stanu, zobacz styl paska stanu apple-mobile-web-App-status-bar-style.

Na Przykład:

Zrzut ekranu przy użyciu czarno-przezroczystego

Zrzut ekranu przy użyciu czarno-przezroczystego

Zrzut ekranu przy użyciu czarnego

Zrzut ekranu przy użyciu czarnego

 52
Author: Ravi Delixan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-04 12:43:42

Z oficjalnej dokumentacji ,

Na przykład, aby ustawić kolor tła na pomarańczowy:

<meta name="theme-color" content="#db5945">
[2]}ponadto Chrome pokaże piękne favicony o wysokiej rozdzielczości, gdy zostaną dostarczone. Chrome dla Androida wybiera najwyższą ikonę res, którą podasz, i zalecamy udostępnienie pliku PNG 192×192px. Na przykład:
<link rel="icon" sizes="192x192" href="nice-highres.png">
 38
Author: khandelwaldeval,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-11 12:20:09