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

본문 바로가기
 
 
 
오늘 1,073
어제 1,706
최대 2,526
전체 3,395,592

최근 방문자

1011
1853
1775
1756
1706
1073
18 19 20 21 22 23
비즈니스의 시작 비즈명함 ~ 가격, 품질, 배송 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 조회6,700회 댓글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,005건 1 페이지
온라인강의 목록
번호 제목
2005
2004
2003
2002
2001
2000
1999
1998
1997
1996
1995
1994
1993
1992
1991
1990
1989
1988
1987
1986
1985
1984
1983
1982
1981
게시물 검색
 
 
상호: 해피정닷컴 대표:정창용 사업자등록번호:119-05-36414 (08394) 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
전화: 070-7600-3500 팩스:02-865-3528 개인정보관리:정창용 mail@happyjung.com 에스크로확인
개인정보취급방침
COPYRIGHT 2001~2017 해피정닷컴. All rights reserved. 부가통신사업신고:서울체신청-1217 통신판매신고:2014-서울구로-0074
 
모바일 버전으로 보기