최근에는 하나의 웹페이지를 만들면 그에 대응하는 모바일 웹페이지를 만드는 것이 필수처럼 되어버렸습니다.
이 경우 아예 도메인을 분리하는 경우도 있고, javascript에서 분기처리를 하는 경우도 있습니다. javascript에서 분기처리를 하는 경우 다음과 같이 agent를 체크하게 됩니다.
var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');
for (var word in mobileKeyWords){
if (navigator.userAgent.match(mobileKeyWords[word]) != null){
// 모바일 작업
break;
}
}
하지만 agent 체크의 경우 새로운 기기가 나오거나, 새로운 모바일 브라우저를 이용하거나.. 하는 경우 무용지물이 될수있습니다.
또, 타블릿의 처리도 문제입니다. agent 속성은 mobile과 비슷한데 화면은 충분히 커서 PC화면을 보여주는게 나을 때가 있습니다.
생각해보면 모바일 agent에 대한 분기처리를 하는 이유는, 모바일 환경의 화면이 작기 때문이지.. 그 agent의 속성이 특이하기 때문이 아닌 경우가 대다수입니다.
대다수라는 표현을 사용한 이유는 모바일에서 특정 스크립트나 css가 먹히지 않는 경우가 존재하기 때문입니다. 대표적으로 mobile 환경에서는 overflow: scroll이 먹히지 않습니다.
따라서 단순히 화면이 작기 때문에 mobile에 대한 분기 처리가 필요한 경우라면 오히려 다음과 같은 코드가 쉽고, 직관적이며, 영속적일 수 있습니다.
jquery 기준으로 다음과 같은 코드가 됩니다.
if ($(window).width() < 450 || $(window).height() < 450) {
// 모바일 작업
}
