-
크롬, 사파리 바로가기 홈 화면에 추가 HTML 메타 태그 (meta)컴퓨터/HTML & JS & TS 2016. 11. 15. 18:33728x90반응형
크롬이나 사파리에서 옵션에 '홈 화면에 추가'라는 기능이 있다.
따로 메타 태그를 사용하지 않으면 아이콘이 랜덤으로 생성된다. (구글 플러스 프로필 사진과 같은 글자 아이콘)
바로가기를 이용하여 사이트를 접속하면 크롬에서는 주소창이 없고, 최근 앱 메뉴에 별도의 액티비티로 간주된다.
<!-- 대응하는 방법 -->
skin.html 에 <head>와 </head> 사이에 아래 코드를 추가한다.
<meta name="mobile-web-app-capable" content="yes"> <link rel="shortcut icon" sizes="192x192" href="./images/android.png"> <meta name="apple-mobile-web-app-title" content="블로그 이름"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <link rel="apple-touch-icon" sizes="128x128" href="./images/ios.png"> <link rel="apple-touch-icon-precomposed" sizes="128x128" href="./images/ios.png"> <!-- Chrome, Firefox OS, Opera 브라우저는 색깔도 지정할 수 있다 --> <meta name="theme-color" content="#4285f4">스킨 편집에서 android.png , ios.png를 업로드한다.
안드로이드 = 192 x 192 (px)
iOS = 128 x 128 (px)
apple-mobile-web-app-status-bar-style 메타 태그는 default, black, black-translucent 가 있다.
default = 일반 상태바, black = 상태바 검은색, black-translucent = 상태바 반투명 검정색
(default와 black 값은 웹 내용이 상태바 아래에 표시되고, black-translucent는 상태바에 가려지는 부분이 생긴다.)
728x90'컴퓨터 > HTML & JS & TS' 카테고리의 다른 글
티스토리 스킨 : 다운로드 버튼 이미지 변경 (2) 2016.11.15 console.log() 글(text) 꾸미기 (0) 2016.11.13 웹(Web) 제작 시 유용한 사이트 (0) 2016.11.13
