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?
.
Myślę, że potrzebujesz Androida 5.0 Lollipop, aby to działało, a Chrome Połącz karty i aplikacje Ustaw na na.
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" />
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">
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
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 czarnego
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
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">
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