스마트폰 포럼

스마트폰 인터넷 사이트 바로가기 아이콘 추가하기

by 박용수 posted Apr 17, 2011
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

모바일 웹에서 접속하는 스마트 폰의 종류에 따라 '홈 화면 바로가기' 아이콘을 설치하는 소스입니다.

제가 시험 해 봤는데.. 잘 되네요. 혹시 참고 될가 해서요.. ^^

 

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

</script>

폰의 종류에 따라 아이콘의 크기가 달라야 하네요. ㅠㅠ

 

인터넷 검색정보로는

 

****  바탕화면의 바로가기 아이콘은  ***

안드로이드 ico : 128 × 128 ,    아이폰 png : 57 × 57 ,   아이폰4 png : 114 × 114 ,  아이패드 png : 72 × 72

가능하면 114×114 이미지로 만들어 아이폰에서 자동으로 크기 리사이즈를 한다.

 

****  스타팅 로딩 화면 이미지는  ***

아이폰은 320×460 , 아이폰4는 640×920 , 아이패드는 768×1004

 

그런데... 친구들 에게 전화해서  갤럭시에서 시험해 보니 ico 가 아닌 png 파일도 바로가기 아이콘으로 잘 등록 되었습니다.

아이폰 3의 경우는 이미지의 크기가 조금 다르다고 등록 되지않고 그냥 홈페이지의 압축화면이 아이콘으로 등록되더군요.

구식 윈도우폰 하나만 가지고 홈페이지를 만드니 시행착오가 많습니다.  ㅋ ~  *^_^*



XE1.8.29 Layout1.1.5