아이팟이나 아이폰에서 티스토리 블로그를 보시는분들 많으시죠?
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 을 가져와서 가는방법으로 수정되었습니다.
* 현재 제 블로그에서 [페이지 소스보기] 로 보셔도 해당 소스를 보실 수 있습니다.
작업 후 아이팟 터치나 아이폰에서 자신의 블로그로 접근하면
작업 후 스마트폰에서 자신의 블로그로 접근하면
이렇게 모바일용 페이지로 이동합니다 :-)
모바일용 웹페이지는 작은 해상도에 맞게 이미지등도 리사이즈 해줘서
느린 모바일기기에서 최적의 상태로 블로그를 볼수 있게 합니다.
'articles > develop' 카테고리의 다른 글
| [iOS] iOS (iPhone,iPod touch) 의 MKMapView 정리하기 (37) | 2010/11/18 |
|---|---|
| [iOS] UIAlertView 를 모달(modal) 창 처럼, 버튼 누르기전까지 대기하기 (14) | 2010/10/01 |
| [iOS] iOS(iPhone)의 UIWebView 에서 javascript 의 alert 을 UIAlertView 로 입맛에 맞게 변경하기 (8) | 2010/09/17 |
| [android] Android 의 TableLayout 의 코너를 둥글게~ (Rounded corner) (16) | 2010/07/15 |
| [android] Android 의 MapView (Google API) 정리하기. (115) | 2010/07/10 |
| [java] 맥북에서 개발하기! 이클립스 빠르게하자! (Speed up Eclipse on OSX) (4) | 2010/07/05 |
| [javascript] 티스토리 블로그 스마트폰에서 모바일페이지로 보게하기 (17) | 2010/02/11 |
트랙백 주소 :: http://lomohome.com/trackback/309
-
Subject: 스마트폰시대에 필수 소스! -모바일 페이지로 자동이동
Tracked from Soul Park S J [가글] 2010/02/12 13:19 삭제안녕하세요 가글입니다. 오늘은 오랜만에 포스팅하네요 우선 포스트 쓰기전에 http://lomohome.com/ <-모근원 님에게 감사하다는 말씀드립니다. 소스제공해주신분이라서. 요즘 스마트폰을 많이 사용하십니다. 뭐.. 네이버나 다음은 해당 포털에서 해당 포털의 블로그에 들어가면 자동으로 모바일 페이지가 나오지만.. 티스토리는 각종 포털에서 들어가면 .. 자동으로 모바일 웹 페이지가 나오지 않습니다. 그래서 '모근원'님이 제공하신 소스 소스-모바일웹..
-
Subject: 스마트폰 블로그 접속자가 급격하게 늘어나고 있습니다.
Tracked from 컴치초탈 2010/02/26 18:20 삭제스마트폰 돌풍이 지속되면서 스마트폰 사용자가 갈수록 많아지는 것 같습니다. 앞으로 휴대전화는 물론이거니와 일반 피씨까지 스마트폰이 대체할 것 이라는 성급한 의견도 나오고 있는 실정입니다. 실제 특정 증권회사는 데스크탑을 전부 스마트폰으로 대체했다는 뉴스도 있었습니다. 사실 확인은 안 된 내용이지만 어쨋든, 스마트폰을 전직원에게 지급하는 회사가 늘어나고 있는 것은 사실입니다. 아마도 내년쯤 되면 스마트폰 사용자 수가 급격하게 늘 것 같습니다. 스마트폰..
-
Subject: user agent string을 이용한 브라우저별 사이트 이동
Tracked from 개구쟁이 태즈의 작은 섬 이야기 - 블로그 2010/06/01 08:50 삭제스마트폰을 이용하여 홈페이지 접속시 스마트폰용 페이지가 자동으로 나오게 하는것을 구글링을 통해 찾아냈군요.. 하도 안나오길래 거의 포기직전 찾았습니다. 브라우저의 user agent string을 이용하는 방법이지요. 여러 사이트의 검색 결과를 토대로 적용한 방법 입니다. <script type="text/javascript"> // goto mobile page //http://en.wikipedia.org/wiki/List_of_user_agen..
좋은 팁이네요 ^-^ 저는 스마트폰은 안쓰지만,
참 유용한 팁 같아요~ 저도 얼른 내 블로그에 적용을..ㅎ
네 이렇게 해두면 스마트폰에서 접근하는 사람들이 많이 편해지겠죠? :-)
옴니아같은 다른 스마트폰들지원은 어떻게 해야하나요?
옴니아나 안드로이드 웹브라우져의 유저에이전트만 알면 조건문에 추가해주면 되는데요..
한번 알아봐야겠네요 :-)
이욜~! ㄳㄳㄳㄳ 핸드폰으로 별거 다하내요 ㅋ
좋은 세상이죠 :-)
이제 수정되었군요! 소스 바꿔야 겠습니다.
또 수정되었습니다.
바뀐걸로 사용 하세요 :-)
이글좀 포스트할께요
소스좀 가져가도 되죠?
넵 출처와 트랙백만 있음 됩니다용.
좋은 정보 감사합니다. 저도 방금 적용했습니다.
네 잘쓰시길 바랍니다 :-)
비밀댓글입니다
현재 하는일이 많아서 그부분을 설명드리기 어렵습니다.
죄송합니다.
소스 감사합니다. 제 블로그에도 지금 막 적용하였습니다.
트랙백 걸었습니다.
넵 트랙백 감사합니다 :-)
LG 인사이트 쓰고있는데 유용한 정보 감사해요^^
나중에 트랙백 실어갈께요~:)