Lollipop의 최신 Chrome 버전에서 헤더 바와 주소 표시 줄의 색상을 변경하는 방법은 무엇입니까?

578

이 주제에서 아직 아무것도 찾지 못했습니다. 개요에서 주소 표시 줄의 색상과 헤더 색상을 변경하는 기능이 정말 마음에 듭니까? 이 작업을 수행하는 쉬운 방법이 있습니까?

Android 용 Chrome 여기에 이미지 설명을 입력하십시오 .

작동하려면 Android 5.0 Lollipop이 필요하고 Chrome의 병합 탭 및 앱 이 켜기로 설정되어 있다고 생각합니다 .

android html google-chrome

— 아르 파드 가보
소스

2016 년 1 월 현재이 기능을 사용하기 위해 탭 병합 옵션이 더 이상 필요하지 않습니다 (롤리팝에서).

— Skuld

1

KitKat의 경우도 마찬가지입니다.

— Revetahw는 Reinstate Monica가

@Skuld '최근 앱'보기에서 색상을 보려면 병합 탭이 필요하지만 '탭 및 앱 병합'을 사용 중지 한 경우에도 Chrome에서 웹 사이트를 볼 때 색상이 계속 표시됩니다. 그러나 언젠가 문제가 해결되어 Chrome의 탭 목록 ( '탭 및 앱 병합'이 사용 중지 된 경우 표시됨)에 흐린 회색 대신 테마 색상이 표시되기를 바랍니다.

— ADTC

1

@ADTC 당신은 탭을 전환 할 때 색상을 잃을 때 이야기하고 있습니까? 그렇다면 탭을 클릭 할 때 색상이 회복되므로 이상적이지는 않지만 실제로 큰 문제는 아닙니다. 가장 큰 것은 볼 때 웹 사이트가 올바른 색상을 가지고 있다는 것입니다 :)

— Skuld

1

@Skuld의 "탭 및 앱 병합"을 끈 상태 에서 탭을 전환 하면 이보기 (링크)가 나타납니다. 이보기에서 모든 탭은 회색입니다. 테마 색상이이 뷰에 남아 있으면 좋을 것입니다. (가) "응용 프로그램이 같은 탭" "병합 탭 및 애플 리케이션"이 켜져 테마 색 얼마나 유사 에를 하고 앱 스위처를 엽니 다. (PS : 탭이 많기 때문에 개인적으로 병합하는 것을 싫어합니다. 그런 다음 앱도 많이 있습니다. 따로 보관하거나 미쳐 >.<

— 버리고 싶습니다.

790

검색 후 해결책을 찾았습니다.

포함 값에 16 진수 코드를 콘텐츠 값으로 사용하여 <meta>태그 를 추가해야 합니다. 예를 들면 다음과 같습니다.<head>name="theme-color"

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

— 아르 파드 가보
소스

19

감사. 자세한 정보는 html5rocks를 참조하십시오 : updates.html5rocks.com/2014/11/…

— redochka

4

Chrome에서 사용 중지 할 수있는 설정이 있습니까? 컬러 주소 표시 줄을 참을 수 없습니다. 기본 색상 만 원합니다.

— 제임스

@James-좋아하는 수정은 아니지만 '앱과 탭 병합'설정을 해제하여 색상 변경을 중지 할 수 있습니다.

— Novocaine

4

정말? '앱과 함께 탭 병합'설정이 해제 된 상태에서 마시멜로를 사용하고 있지만 주소 표시 줄은 여전히 색상입니다. 아마도 그들은 '버그를 고쳤다'.

— user711413

3

16 진 색상 일 필요는 없으며 유효한 CSS 색상이 작동합니다.

— Bogdan M.

500

metaAndroid, iPhone 및 Windows Phone을 지원 하려면 실제로 3 개의 태그가 필요합니다

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

— 에도아르도 아 스토리 나
소스

그리고 로딩 바는 어떻습니까? 상단 막대를 어둡게하고 로딩 막대를 흰색으로 만드는 웹 사이트를 보았지만 코드를 분석하는 스 니펫을 찾을 수 없습니까?

— Newbie

19

참고 : Apple의 개발 노트에 따르면 : "이 메타 태그는에 설명 된대로 먼저 전체 화면 모드를 지정하지 않으면 아무런 효과가 없습니다 apple-apple-mobile-web-app-capable."

— Yan Foto

실제로 매우 유용한 정보 인 @YanFoto. 어떻게할까요?

— viriato

44

iOS apple-mobile-web-app-status-bar-style속성은 기본값 black인 black-translucent or `` 만 지원합니다 . 사용자 정의 색상을 사용할 수 없습니다.

— sixones

2

당신이 사용하는 경우 black-translucent당신이 어떻게 될지 아마 흰색 텍스트 투명 상단 막대를 만들 것입니다 후

— 99 문제 - 구문이 아니다

93

예를 들어, 배경을 좋아하는 / 브랜드 색상으로 설정하려면

HEAD 섹션 의 HTML 코드에 메타 속성 아래 추가

<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-appable 메타 태그를 yes로 설정하십시오. 예를 들어 다음 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에는 제공되는 멋진 고해상도 파비콘이 표시됩니다. Android 용 Chrome은 제공하는 고해상도 아이콘을 선택하므로 192 × 192px PNG 파일을 제공하는 것이 좋습니다. 예를 들면 다음과 같습니다.

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

— 칸 발발 디발
소스

22

이 관련이없는 정보를 추가하는 외에, 원래의 대답과 동일

— igorsantos07을

9

@ igorsantos07 방금 공식 문서에 대한 링크를 추가하고 싶었습니다. 그게 다야

— Deval Khandelwal

4

선택한 답변에서 누락 된 것이 문서에 대한 링크라고 생각했습니다. 그것이 내가 여기서 끝났을 때 내가 인터넷 검색 한 것입니다. 감사합니다.

— 저스틴 포스

이것은 중복입니다

— taimur alam