Lollipop의 최신 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">
'Programing' 카테고리의 다른 글
| GitHub에서 단일 파일 다운로드 (0) | 2020.02.10 |
|---|---|
| 기본 파이썬 반복기 빌드 (0) | 2020.02.10 |
| 매개 변수가있는 RedirectToAction (0) | 2020.02.10 |
| macOS Mojave (10.14)에서 Lion (10.7)의 JAVA_HOME은 어디에 있습니까? (0) | 2020.02.10 |
| 프로그래밍 방식으로 기본 UIButton을 작성하는 방법 (0) | 2020.02.10 |