Mobile Browser를 위한 Tistory Mobile site 자동 이동 skin 제작
Mobile Browser 들이 이제는 훌륭해져서 어지간한 web site들은 거의 표현이 가능해졌다.
다만, 단말기의 액정 size가 좀 작아서, PC screen의 해상도에 최적화 되어 있는 site들을 보기에는 좀 작다는 것이 문제고, 또 loading하는데 오래 걸리는 문제점이 있다.
많은 portal들이 mobile site를 만들어서 이 문제를 해결해 주고 있는데, tistory 역시 mobile site가 존재하긴 한다. host 뒤에 /m/ directory를 추가해 주면 간단하게 mobile site로 이동한다.
예를 들어면 http://rainism.tistory.com 은 PC용 화면, http://rainism.tistory.com/m 은 mobile용 화면이 loading 된다.
안타까운 것은 mobile browser가 접속했을 때에 자동으로 mobile site를 내려주는 기능이 구현되어 있지 않은 점인데... 이걸 사용자 저장 skin에 script를 추가해 줌으로써 해결하는 방법을 firen님께서 만들어 주셨는데...
그 code를 설명하자면 무단으로 퍼 온 것 같긴 하지만 이 blog는 인기가 없기 때문에...
browser에서 javascript로 navigator.userAgent를 실행하면 HTTP req에 날아가는 user agent를 볼 수 있는데... 여기에 있는 UA field의 browser 고유값을 이용해서 mobile browser인지를 파악하고, mobile site로 자동 이동한다.
(단, 무조건 mobile site로 이동하기 때문에 'PC 화면 보기'를 눌러도 mobile site만 보인다. OTL)
위의 if 문에 변경 조건이 있는데, UA field에 'iPad'라는 값이 없고, (AND) 'Mobile', 'Windows CE', 'Opera Mini', 'POLARIS' 등의 값이 있으면 mobile site로 전환한다.
우선 내가 가지고 있는 단말로 확인을 해 보면..
iPhone Safari : Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_2 like Mac OS X; ko-kr) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7D11 Safari/528.16
iPhone Opera : Opera/9.80 (iPhone; Opera Mini/5.0.0176/812; U; ko) Presto/2.4.154.15
모토로이 Chrome : Mozilla/5.0 (Linux; Ul; Android 2.1-update1; ko-kr;XT720 Build/STSKT_N_79.11.36R) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
모토로이 Opera : Opera/9.80 (J2ME/MIDP; Opera Mini/5.0.018302/812; U; en) Presto/2.4.15
옴니아2 IE : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; Windows Phone 6.5)
옴니아2 Opera : SAMSUNG-SCH-M710/(null)ID4 (compatible; MSIE 6.0; Windows CE; PPC) Opera 9.5
대략 이정도
다만, 단말기의 액정 size가 좀 작아서, PC screen의 해상도에 최적화 되어 있는 site들을 보기에는 좀 작다는 것이 문제고, 또 loading하는데 오래 걸리는 문제점이 있다.
많은 portal들이 mobile site를 만들어서 이 문제를 해결해 주고 있는데, tistory 역시 mobile site가 존재하긴 한다. host 뒤에 /m/ directory를 추가해 주면 간단하게 mobile site로 이동한다.
예를 들어면 http://rainism.tistory.com 은 PC용 화면, http://rainism.tistory.com/m 은 mobile용 화면이 loading 된다.
안타까운 것은 mobile browser가 접속했을 때에 자동으로 mobile site를 내려주는 기능이 구현되어 있지 않은 점인데... 이걸 사용자 저장 skin에 script를 추가해 줌으로써 해결하는 방법을 firen님께서 만들어 주셨는데...
그 code를 설명하자면 무단으로 퍼 온 것 같긴 하지만 이 blog는 인기가 없기 때문에...
아래 script를 skin.html의 <head> tag 아래에 바로 삽입해 주면 된다.
<script
type="text/javascript">
if (navigator.userAgent.match(/iPad/) == null && navigator.userAgent.match(/Mobile|Windows CE|Opera Mini|POLARIS/) != null)
location.href = "http://" + location.host + "/m" + location.pathname;
</script>browser에서 javascript로 navigator.userAgent를 실행하면 HTTP req에 날아가는 user agent를 볼 수 있는데... 여기에 있는 UA field의 browser 고유값을 이용해서 mobile browser인지를 파악하고, mobile site로 자동 이동한다.
(단, 무조건 mobile site로 이동하기 때문에 'PC 화면 보기'를 눌러도 mobile site만 보인다. OTL)
위의 if 문에 변경 조건이 있는데, UA field에 'iPad'라는 값이 없고, (AND) 'Mobile', 'Windows CE', 'Opera Mini', 'POLARIS' 등의 값이 있으면 mobile site로 전환한다.
우선 내가 가지고 있는 단말로 확인을 해 보면..
iPhone Safari : Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_2 like Mac OS X; ko-kr) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7D11 Safari/528.16
iPhone Opera : Opera/9.80 (iPhone; Opera Mini/5.0.0176/812; U; ko) Presto/2.4.154.15
모토로이 Chrome : Mozilla/5.0 (Linux; Ul; Android 2.1-update1; ko-kr;XT720 Build/STSKT_N_79.11.36R) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
모토로이 Opera : Opera/9.80 (J2ME/MIDP; Opera Mini/5.0.018302/812; U; en) Presto/2.4.15
옴니아2 IE : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; Windows Phone 6.5)
옴니아2 Opera : SAMSUNG-SCH-M710/(null)ID4 (compatible; MSIE 6.0; Windows CE; PPC) Opera 9.5
대략 이정도
최근 TISTORY에 모바일 스킨이 적용되어서, 이제 이 code는 빼는 것이 좋다. 접속할 때 자동으로 모바일로 전환해 주기 때문에 필요가 없고, 또 위 code를 넣으면 PC 화면 보기가 동작하지 않는 단점이 있으니...
댓글
이 글 공유하기
다른 글
-
Mobile TV의 미래는 암울한가
Mobile TV의 미래는 암울한가
2010.07.08 -
아이폰 iPhone 4, 문제의 본질은 덮고 가는 것인가?
아이폰 iPhone 4, 문제의 본질은 덮고 가는 것인가?
2010.07.07 -
Intel, Chipset과 OS로 무선 Wideband 시장 양면 공략 - 2. Mobile Network와 Smartphone
Intel, Chipset과 OS로 무선 Wideband 시장 양면 공략 - 2. Mobile Network와 Smartphone
2008.11.07 -
Intel, Chipset과 OS로 무선 Wideband 시장 양면 공략 - 1. Intel의 Mobile 전략
Intel, Chipset과 OS로 무선 Wideband 시장 양면 공략 - 1. Intel의 Mobile 전략
2008.11.03