아이팟이나 아이폰에서 티스토리 블로그를 보시는분들 많으시죠?
http://[일반주소].tistory.com
를 사용하시던 티스토리 블로거 님들은 신경쓰지 않으셔도
아이팟이나 아이폰에서 블로그 접근하면 모바일용 페이지로 보입니다.
스마트폰에서 블로그로 접근하면 모바일용 페이지로 보입니다.
- 수정 : 현재나와있는 거의 모든 모바일기기의 userAgent 를 검사하는 방식으로 변경했습니다.
http://en.wikipedia.org/wiki/List_of_user_agents_for_mobile_phones
그런데 저처럼 티스토리에 자신의 도메인을 연결해서 쓰시는분들은
다음 그림에서처럼 자동으로 모바일 페이지로 이동이 안되고 일반 웹페이지가 나왔었지요.
이때 자바스크립트 몇줄만 스킨에 넣어주면 모바일용 페이지로 이동하게 만들 수 있습니다.
이 방법은 저처럼 lomohome.com 이나 www.lomohome.com 등의 도메인을 티스토리에 연결하신 분께 해당됩니다.
관리자모드 - 스킨 - HTML/CSS 편집에서
HTML 의 <head></head> 태그 사이안에 다음의 자바스크립트를 넣으면
블로그 접근시 유저에이전트를 검사하여 스마트폰이면
모바일 사이트로 이동을 하게 합니다 :-)
<script language="JavaScript">
//모바일 페이지로 이동.
//http://en.wikipedia.org/wiki/List_of_user_agents_for_mobile_phones
var uAgent = navigator.userAgent.toLowerCase();
var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
for(var i=0;i<mobilePhones.length;i++)
if(uAgent.indexOf(mobilePhones[i]) != -1)
document.location = "http://"+ location.host +"/m" + location.pathname;
</script>
주의하실점은 위의 빨간색에 이탤릭체로 표시된 부분은
http://[원래티스토리주소].tistory.com/m
으로 해주셔야 한다는것 입니다 :-)
url 을 가져와서 가는방법으로 수정되었습니다.
* 현재 제 블로그에서 [페이지 소스보기] 로 보셔도 해당 소스를 보실 수 있습니다.
작업 후 아이팟 터치나 아이폰에서 자신의 블로그로 접근하면
작업 후 스마트폰에서 자신의 블로그로 접근하면
이렇게 모바일용 페이지로 이동합니다 :-)
모바일용 웹페이지는 작은 해상도에 맞게 이미지등도 리사이즈 해줘서
느린 모바일기기에서 최적의 상태로 블로그를 볼수 있게 합니다.
'내가끄적인글 > 프로그래밍' 카테고리의 다른 글
| [iOS] iOS (iPhone,iPod touch) 의 MKMapView 정리하기 (47) | 2010.11.18 |
|---|---|
| [iOS] UIAlertView 를 모달(modal) 창 처럼, 버튼 누르기전까지 대기하기 (18) | 2010.10.01 |
| [iOS] iOS(iPhone)의 UIWebView 에서 javascript 의 alert 을 UIAlertView 로 입맛에 맞게 변경하기 (8) | 2010.09.17 |
| [android] Android 의 TableLayout 의 코너를 둥글게~ (Rounded corner) (19) | 2010.07.15 |
| [android] Android 의 MapView (Google API) 정리하기. (128) | 2010.07.10 |
| [java] 맥북에서 개발하기! 이클립스 빠르게하자! (Speed up Eclipse on OSX) (10) | 2010.07.05 |
