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

Android / 글쓴이

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

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

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

답변

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

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

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

답변

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

답변

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

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을 참조하십시오.

예를 들어 :

검은 색 반투명을 사용하는 스크린 샷

검은 색 반투명을 사용하는 스크린 샷

검은 색을 사용한 스크린 샷

검은 색을 사용한 스크린 샷

답변

로부터 공식 문서 ,

예를 들어 배경색을 주황색으로 설정하려면

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

또한 Chrome에는 제공되는 멋진 고해상도 파비콘이 표시됩니다. Android 용 Chrome은 제공하는 고해상도 아이콘을 선택하므로 192 × 192px PNG 파일을 제공하는 것이 좋습니다. 예를 들면 다음과 같습니다.

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

답변