Як змінити колір заголовка та адресного рядка в новітній версії Chrome на Lollipop?

578

На цю тему ще нічого не знайшли. Мені дуже подобається можливість зміни кольору адресного рядка та кольору заголовка на Огляді? Чи є якийсь простий спосіб зробити це?

Chrome для Android введіть тут опис зображення .

Я думаю, для цього вам потрібен Android 5.0 Lollipop, а вкладки та додатки Chrome для з’єднання встановлено на Увімкнено .

android html google-chrome

— Арпад Габор
джерело

З січня 2016 року опція "Об’єднати вкладки" більше не потрібна для цього (у Lollipop).

— Skuld

1

Це так само зараз і для KitKat.

— Revetahw каже: Відновити Моніку

@Skuld Вам потрібні вкладки злиття, щоб побачити колір у вікні "Останні програми", але навіть якщо ви вимкнули "Об’єднати вкладки та програми", ви все одно можете побачити колір під час перегляду веб-сайту в Chrome. Але я сподіваюся, що вони це виправлять за один день, так що список вкладок у Chrome (відображається, коли "Об’єднання вкладок і додатків" вимкнено) також відображатиме колір теми замість тьмяного сірого.

— ADTC

1

@ADTC Ви говорите про те, коли переходите до перемикання вкладок, він втрачає колір? Якщо так, то так, так, це не ідеально, але насправді не дуже важливо, оскільки воно набирає колір при натисканні на вкладку. Найголовніше те, що веб-сайт при перегляді має правильний колір :)

— Skuld

1

@Skuld, якщо "Об’єднати вкладки та програми" вимкнено , ви отримуєте це уявлення (посилання) при переключенні вкладок. У цьому перегляді всі вкладки просто сірі. Було б непогано, якби колір теми залишився в цьому погляді. Подібно до того , як «додаток, як вкладці» має колір теми , коли «Об'єднати вкладки і додатки» включається на і ви відкриваєте додаток перемикача. (PS: Особисто я ненавиджу злиття, тому що у мене дуже багато вкладок, а потім у мене також багато додатків. Я хочу тримати їх окремо, або я зійду з розуму >.< )

— ADTC

790

Знайшли рішення після деяких пошуків.

Вам потрібно додати <meta>тег у вашому <head>містить name="theme-color", з HEX коду в якості значення вмісту. Наприклад:

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

— Арпад Габор
джерело

19

Дякую. Отримайте також html5rocks для отримання додаткової інформації: updates.html5rocks.com/2014/11/…

— redochka

4

Чи є налаштування в Chrome, щоб вимкнути це? Я не витримую кольорового адресного рядка. Я просто хочу колір за замовчуванням.

— Джеймс

@James - це може бути не вподобане виправлення, але ви можете зупинити зміну кольору, вимкнувши налаштування "Об’єднати вкладки з програмами".

— Новокаїн

4

Дійсно? Я використовую Marshmallow, налаштування "Об’єднати вкладки з додатками" вимкнено, але адресний рядок все ще кольоровий. Можливо, вони "виправили помилку".

— користувач711413

3

Не обов'язково повинен бути шістнадцятковий колір, будь-який дійсний колір CSS буде працювати.

— Богдан М.

499

Насправді вам потрібні 3 metaтеги для підтримки Android, iPhone та 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">

— Едоардо Л'Асторіна
джерело

А як щодо завантажувальної планки? Як я бачив веб-сайти, які роблять верхню смугу темною, а смужка завантаження - білою, але я не можу знайти фрагмент, що аналізує код?

— Новачок

19

Примітка . Відповідно до розробок Apple : "Цей метатег не має ефекту, якщо спочатку не вказати режим повноекранного режиму, як описано в apple-apple-mobile-web-app-capable."

— Ян Фото

@YanFoto, що насправді дуже корисна інформація. Як би це зробити?

— віріато

44

КСН apple-mobile-web-app-status-bar-styleатрибут тільки підтримує black, black-translucent or default` - ви не можете використовувати власний колір.

— шістсони

2

якщо ви будете використовувати black-translucentйого, зробить верхню панель прозорою з білим текстом, що, мабуть, було б після

— 99 Проблем - Синтаксис не один

93

Наприклад, щоб встановити фон улюбленого / брендового кольору

Додайте нижче властивості Meta до свого HTML-коду в розділі HEAD

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

Приклад

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

Внизу зображення я лише згадав, як Chrome сприйняв вашу властивість кольору теми

Firefox OS, Safari, Internet Explorer і Opera Coast дозволяють визначати кольори для елементів браузера і навіть платформи за допомогою метатегів.

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

Встановіть мета-тег Apple-mobile-web-app на "Так", щоб увімкнути автономний режим. Наприклад, наступний HTML відображає веб-вміст у автономному режимі.

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

Зміна зовнішнього вигляду рядка стану

Ви можете змінити зовнішній вигляд рядка стану за замовчуванням на чорний або чорний напівпрозорий. З чорним напівпрозорим рядком стану плаваючий поверх контенту на весь екран, а не натискаючи його вниз. Це надає компоновці більше висоти, але перешкоджає верхній частині. Ось необхідний код:

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

Докладніше про зовнішній вигляд рядка стану див. У стилі apple-mobile-web-app-status-bar-style.

Наприклад:

Знімок екрана з використанням чорного напівпрозорого

Знімок екрана з використанням чорного

— Раві Деліксан
джерело

42

З офіційної документації ,

Наприклад, щоб встановити колір фону в помаранчевий:

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

Крім того, Chrome покаже гарні зображення високої роздільної здатності, коли вони будуть надані. Chrome для Android вибирає найвищу піктограму Res, яку ви надаєте, і ми радимо надати PNG-файл 192 × 192 пікселів. Наприклад:

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

— Деваль Хандельваль
джерело

22

це те саме, що і оригінальна відповідь, окрім додавання непов'язаної інформації

— igorsantos07

9

@ igorsantos07 Я просто хотів додати посилання на офіційні документи. Ось і все

— Deval Khandelwal

4

Я думав, що посилання на документацію - це саме те, чого не було в обраній відповіді. Ось за що я гугла, коли опинилася тут. Дякую.

— Джастін Форс

Це

— зайве