모바일웹 접속시 자동으로 바탕화면에 바로가기 생성 > 기술자료

본문 바로가기
사이트 내 전체검색

기술자료

HTML 모바일웹 접속시 자동으로 바탕화면에 바로가기 생성

페이지 정보

댓글 0건 조회 9,016회 수정일 16-02-21 00:00

본문

아직 성공되지 않은 정보입니다.


<!-- 모바일용 바탕화면 바로가기 아이콘 택없음 --> 
<link href="/mobile/image/shortcut_apple.png" rel="apple-touch-icon-precomposed"></link> 
<!-- 모바일용 바탕화면 바로가기 아이콘(IOS)114*114 --> 
<link href="/mobile/image/shortcut_apple.png" rel="apple-touch-icon"></link> 
<!-- 모바일용 바탕화면 바로가기 아이콘(Android) --> 
<link href="/mobile/image/favicon.png" rel="shortcut icon"></link> 
<!-- 스타일업 이미지 640*920(4), 640*1138(5) --> 
<link href="/mobile/image/favicon.png" rel="apple-touch-startup-image"></link> 

<script type="text/javascript"> 
// 접속 핸드폰 정보
var userAgent = navigator.userAgent.toLowerCase();
// 모바일 홈페이지 바로가기 링크 생성
if(userAgent.match('iphone')) {
    document.write('<link href="/mobile/image/shortcut_apple.png" rel="apple-touch-icon">') 
} else if(userAgent.match('ipad')) { // sizes="72*72"
    document.write('<link href="/mobile/image/shortcut_apple-ipad.png" rel="apple-touch-icon" >')
} else if(userAgent.match('ipod')) {
    document.write('<link href="/mobile/image/shortcut_apple.png" rel="apple-touch-icon">') 
} else if(userAgent.match('android')) {
    document.write('<link href="/mobile/image/favicon.ico" rel="shortcut icon">') 
} else {
    document.write('<link href="/mobile/image/favicon.ico" rel="shortcut icon">') 
}
</script>


[홈 화면 아이콘] - 기본설정
아이폰의 경우 웹 페이지를 앱처럼처럼 홈 화면에 바로가기를 추가할 수 있습니다. 
단순히 아이콘만 설정 가능한 것이 아니라 아이폰의 홈 화면 아이콘들의 공통점인 라운드 박스 효과는 
기본적으로 적용되고, 반사광 효과의 적용 유무를 추가로 선택이 가능합니다.

// 반사광 효과를 주는 경우
<link rel="apple-touch-icon" href="../images/icon.png" /> 
// 반사광 효과가 없는 경우
<link rel="apple-touch-icon-precomposed" href="../images/icon.png" />
apple-touch-icon.png / apple-touch-icon-precomposed.png 의 파일명으로 도메인의 최상위 경로에 올려두면 
위의 link 태그를 적용하지 않아도 홈 화면에 추가시 아이콘이 적용됩니다.
기기별 홈 아이콘 이미지 사이즈
: 아이폰3G, 아이폰3GS [ 사이즈: 57*57 ]
: 아이패드 [ 사이즈: 72*72 ]
: 아이폰 4 [ 사이즈: 114*114 ]

홈 아이콘 작업시 주의사항!! 
- 이미지는 네모 : 사파리 브라우저에서 홈 아이콘 등록시 기본으로 라운드 박스 효과 적용됩니다.
- 라운드 박스 작업 No : 이미지를 라운드 박스로 작업할 경우 홈아이콘 추가시 깨져보임니다.
- 반사광 없이 작업 : 기본으로 반사광이 들어가며, 반사광 여부를 설정할 수 있습니다.
- 이미지는 png로 저장!!

관련자료
http://playgroundblog.tistory.com/11
http://okky.kr/article/164642 
http://m.blog.naver.com/redflaghk/40156122631 
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.


Total 166건 1 페이지
기술자료 목록
번호 제목
166 HTML
웹브라우저 언어설정 코드 (wr.2018-03-28) Hit.278
165 HTML
164 HTML
163 HTML
162 HTML
ul 영역에 40px 여백 생길때 (wr.2017-12-18) Hit.672
161 HTML
160 HTML
159 HTML
158 HTML
157 HTML
156 HTML
155 HTML
checkbox 타입 readonly 적용 (wr.2017-04-18) Hit.1221
154 HTML
153 HTML
152 HTML
151 HTML
HTML Anchors with 'name' or 'id'? (up.2016-12-27) Hit.1748
150 HTML
149 HTML
[CSS] div 고정폭 + 가변폭 (up.2016-09-20) Hit.2801
148 HTML
[CSS] :before , :after 가상요소 (wr.2016-09-03) Hit.2602
147 HTML
146 HTML
145 HTML
[CSS] div 이미지 공백 없애기 (wr.2016-08-09) Hit.2962
144 HTML
[CSS] li height 높이 변경 (wr.2016-08-09) Hit.3246
143 HTML
142 HTML
[CSS] DIV에 UL 가운데 정렬 (wr.2016-08-06) Hit.2718
게시물 검색

회원로그인

접속자집계

오늘
278
어제
3,054
최대
3,099
전체
3,914,153

회사명 해피정닷컴 주소 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
사업자 등록번호 119-05-36414 대표 정창용 전화 070-7600-3500 팩스 02-865-3528
통신판매업신고번호 2014-서울구로-0074 개인정보 보호책임자 정창용
Copyright © 2001-2018 해피정닷컴. All Rights Reserved.