모바일웹 접속시 자동으로 바탕화면에 바로가기 생성 > 기술자료 | 해피정닷컴

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

본문 바로가기

사이트 내 전체검색

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

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

페이지 정보


본문

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


<!-- 모바일용 바탕화면 바로가기 아이콘 택없음 --> 
<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 2,641건 44 페이지
  • RSS
기술자료 목록
1781
전자결제   27800  2016-03-11 18:59 ~ 2016-03-14 00:00  
1780
XpressEngine   13880  2016-03-10 22:31  
1779
ClassicASP   23002  2016-03-09 22:31  
1778
호스팅   13901  2016-03-07 10:42 ~ 2017-09-21 00:00  
1777
Editor   15732  2016-03-03 17:30 ~ 2021-05-21 19:26  
1776
Editor   14638  2016-03-03 14:54  
1775
Editor   19618  2016-03-03 14:51  
1774
그누보드   12502  2016-03-03 13:28  
1773
WindowsServer   15481  2016-02-29 18:25  
1772
ClassicASP   17894  2016-02-25 08:45  
1771
ClassicASP   13658  2016-02-25 01:04  
1770
ClassicASP   19591  2016-02-25 00:52 ~ 2017-01-13 00:00  
1769
ClassicASP   15245  2016-02-25 00:48  
1768
ClassicASP   17774  2016-02-25 00:16 ~ 2016-02-26 00:00  
1767
WindowsServer   11949  2016-02-24 21:32  
1766
HTML   17573  2016-02-21 06:31  
열람
HTML   39049  2016-02-21 00:58 ~ 2016-02-21 00:00  
1764
일반   10193  2016-02-19 17:54  
1763
일반   10885  2016-02-19 17:32  
1762
HTML   14888  2016-02-19 16:59  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.