롤리팝의 최신 Chrome 버전에서 헤더 바와 주소 바의 색상을 변경하려면 어떻게 해야 합니까?
이 주제에 대해 아직 아무것도 못 찾았어요.Overview에서 주소 표시줄과 헤더 색상을 변경할 수 있는 기능이 매우 마음에 듭니다.쉽게 할 수 있는 방법이 있을까요?
.
Android 5.0 (Lollipop)이 동작하기 위해서는 Chrome의 Merge Tabs and Apps를 On으로 설정해야 한다고 생각합니다.
나는 몇 번의 검색 끝에 해결책을 찾았다.
를 추가해야 합니다.<meta>태그 인<head>재중name="theme-color"16진수 코드를 콘텐츠 값으로 지정합니다.예를 들어 다음과 같습니다.
<meta name="theme-color" content="#999999" />
Android 장치에 네이티브가 있는 경우dark-mode이네이블,이후이meta태그는 무시됩니다.
Android용 Chrome은 네이티브 장치에서는 색상을 사용하지 않습니다.
dark-mode가능한.
출처: 테마컬러 메타태그
실제로는 3개 필요합니다.metaAndroid, 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">
예를 들어, 배경을 좋아하는/브랜딩 색으로 설정하려면:
HEAD 섹션의 HTML 코드에 다음 Meta 속성을 추가합니다.
<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 고유의 스타일링
가이드라인(여기 문서):
Safari 사용자 인터페이스 컴포넌트 숨기기
독립 실행형 모드를 켜려면 Apple-mobile-web-app 지원 메타 태그를 yes로 설정합니다.예를 들어 다음 HTML은 독립 실행형 모드를 사용하여 웹 콘텐츠를 표시합니다.
<meta name="apple-mobile-web-app-capable" content="yes">상태 표시줄 모양 변경
기본 상태 막대의 모양을 검은색 또는 검은색 반투명으로 변경할 수 있습니다.검은색 반투명 상태 표시줄은 전체 화면 내용을 아래로 누르지 않고 맨 위에 떠 있습니다.이렇게 하면 레이아웃의 높이가 높아지지만 맨 위에 방해가 됩니다.필요한 코드는 다음과 같습니다.
<meta name="apple-mobile-web-app-status-bar-style" content="black">
예를 들어 다음과 같습니다.
검은 반투명을 사용한 스크린샷
블랙을 사용한 스크린샷
예를 들어, 배경색을 주황색으로 설정하려면:
<meta name="theme-color" content="#db5945">또한 Chrome은 제공 시 아름다운 고해상도 파비콘을 보여줍니다.Android용 Chrome은 귀하가 제공하는 가장 높은 해상도 아이콘을 선택하며 192×192px PNG 파일을 제공할 것을 권장합니다.예를 들어 다음과 같습니다.
<link rel="icon" sizes="192x192" href="nice-highres.png">
다음의 순서를 모두 확인해 주세요.
<meta name="theme-color" content="#db4b5d" />서 in 。<head>붙이다- Chrome ★★★★★★★★★★★★★★★★★★★:
- 테마 옵션까지 스크롤 다운
- 라이트 테마로 전환합니다.
- 테마 옵션까지 스크롤 다운
- 페이지를 새로고침 합니다.
언급URL : https://stackoverflow.com/questions/26960703/how-can-i-change-the-color-of-header-bar-and-address-bar-in-the-newest-chrome-ve
'programing' 카테고리의 다른 글
| UIImage 문자열과 Base64 문자열 간 변환 (0) | 2023.04.10 |
|---|---|
| WPF에서 모달 대화 상자를 만드는 방법 (0) | 2023.04.10 |
| wpf: 명령에 의해 버튼이 비활성화되었을 때 툴팁을 표시하는 방법 (0) | 2023.04.10 |
| bash 쉘에서 하나의 문자열을 여러 변수로 분할하려면 어떻게 해야 합니까? (0) | 2023.04.10 |
| 엔티티 프레임워크 VS LINQ에서 SQL로의 VS ADO.저장 프로시저를 사용하는 NET? (0) | 2023.04.10 |