모바일웹 접속시 자동으로 바탕화면에 바로가기 생성 > 온라인강의

본문 바로가기
 
 
 
오늘 1,170
어제 1,770
최대 2,526
전체 3,571,731

최근 방문자

1016
1862
1835
1777
1770
1170
15 16 17 18 19 20
비즈니스의 시작 비즈명함 ~ 가격, 품질, 배송 3가지 만족을 드리는 비즈명함 / 즉석명함 / 급행서비스 / 서울 전지역 수도권일부 3시간배송

select * from g5_menu where me_use = '1' and me_link like '%lecture%'
온라인강좌 홈 > 온라인강좌 > 온라인강좌

HTML | 모바일웹 접속시 자동으로 바탕화면에 바로가기 생성 (update. 2016-02-21)

페이지 정보

작성일2016-02-21 00:58 조회7,797회 댓글0건

본문

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


<!-- 모바일용 바탕화면 바로가기 아이콘 택없음 --> 
<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,093건 1 페이지
온라인강의 목록
번호 제목
2093
Search 네이버 검색등록 삭제하기 (write.2017-10-20)새글  Hit.18
2092
Search 접속자 로그 분석 서비스 (write.2017-10-19)  Hit.21
2091
2090
2089
2088
2087
2086
2085
2084
2083
2082
2081
2080
2079
2078
2077
2076
2075
2074
Editor [CKEeditor] Emojione 추가하기 (write.2017-09-18)  Hit.311
2073
2072
2071
ClassicASP 파일 다운로드 소스 (write.2017-09-13)  Hit.410
2070
일반 무료 음악 사이트 (write.2017-09-09)  Hit.472
2069
호스팅 이미지 호스팅 (update.2017-09-07)  Hit.476
게시물 검색
 
 
상호: 해피정닷컴 대표:정창용 사업자등록번호:119-05-36414 (08394) 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
전화: 070-7600-3500 팩스:02-865-3528 개인정보관리:정창용 mail@happyjung.com 에스크로확인
개인정보취급방침
COPYRIGHT 2001~2017 해피정닷컴. All rights reserved. 통신판매신고:2014-서울구로-0074
 
모바일 버전으로 보기