모바일웹 브라우저 상단바 색상 설정

모바일 브라우저 상단, 타이틀바, 주소창의 색상을 변경하는 방법입니다.

아래 meta 테그를 Head 테그 사이에 넣으면 적용이 됩니다.

<meta name="theme-color" content="#4285f4">

현재는 모바일 안드로이드 OS에서

Google Chrome과 Firefox Os, Opera 브라우저, 삼성 브라우저만 지원하는 Meta 코드입니다.

적용하면 위 이미지처럼 브라우저 주소창이 나오는 상단바의 배경색이 바뀝니다.

이걸 이용해 모바일 웹의 Hedaer 색상과 일치시키면 본인의 사이트 테마 색상과 어울리는 모바일 서비스를 만들 수 있습니다.

상단바 색상을 지정하면 스크롤하더라도 통신사나 배터리, 와이파이 상태가 나오는 최상단 부분의 색이 지정한 색으로 유지됩니다.

이상 끝.