Lomohome.com :: 괴발자 모근원

아이팟이나 아이폰에서 티스토리 블로그를 보시는분들 많으시죠?
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 을 가져와서 가는방법으로 수정되었습니다.

* 현재 제 블로그에서 [페이지 소스보기] 로 보셔도 해당 소스를 보실 수 있습니다.

작업 후 아이팟 터치나 아이폰에서 자신의 블로그로 접근하면

작업 후 스마트폰에서 자신의 블로그로 접근하면
이렇게 모바일용 페이지로 이동합니다 :-)

모바일용 웹페이지는 작은 해상도에 맞게 이미지등도 리사이즈 해줘서
느린 모바일기기에서 최적의 상태로 블로그를 볼수 있게 합니다.

Posted by 모근원