Mobile JavaScript Basic

모바일 장치 구분

스마트폰으로 http://naver.com에 접속하면 자동으로 http://m.naver.com으로 이동합니다. 네이버 페이지에 접속한 사용자가 스마트폰을 사용하는지 확인해 스마트폰이면 http://m.naver.com으로 이동시키기 때문입니다. 여기서는 이러한 기능에 사용할 수 있는 스마트폰 확인 방법을 알아봅니다.

스마트폰을 확인할 때 일반적으로 navigator 객체의 userAgent 속성을 사용합니다. userAgent 속성은 현재 웹 페이지를 실행하는 웹 브라우저의 정보를 나타냅니다. 우선, 스마트폰에서 userAgent가 어떠한 값을 가지고 있는지 아래처럼 코드를 작성해 확인해 봅시다.

							var userAgent = navigator.userAgent;
							alert(userAgent);
						


스마트폰 브라우저의 userAgent 속성에는 브라우저를 구분할 수 있는 고유한 문자열이 있는데요. 아래를 보면 아이폰은 userAgent 속성에 iPhone이라는 문자열이 있고 윈도우폰7에는 IEMobile이라는 문자열이 있습니다. 이렇게 다음 키워드를 사용하면 각각의 스마트폰을 구분할 수 있습니다.

  1. ◈ iPhone
  2. ◈ Opera Mini
  3. ◈ iPod
  4. ◈ Opera Mobi
  5. ◈ iPad
  6. ◈ Nokia
  7. ◈ Android
  8. ◈ WebOS
  9. ◈ Windows CE
  10. ◈ BlackBerry
  11. ◈ IEMobile
  12. ◈ SonyErricsson

이 키워드를 사용해 아래의 소스코드처럼 스마트폰을 구분하는 코드를 작성합니다.

							// 변수 선언
							var smartPhones = [
								'iphone', 'ipod', 
								'window ce', 'android', 
								'blackberry', 'nokia', 
								'webos', 'opera mini', 
								'sonyerricsson', 'opera mobi', 
								'iemobile'
							];

							for (var i in smartPhones) {
								// 스마트폰 확인
								if (navigator.userAgent.toLowerCase().match(new RegExp(smartPhones[i]))) {
									alert('This is Smart Phone..!');
									document.location = 'http://m.hanb.com';
								}
							}
						

데스크탑에서 실행하면 아무 반응도 없지만, 스마트폰으로 접속하면 자동으로 한빛미디어의 모바일 페이지로 이동합니다.
여기서 소개한 키워드 이외에도 여러 가지 키워드를 사용할 수 있습니다. 예를 들어 문자열 Windows Mobile을 사용하면 Windows Mobile 6.5 이전의 기기를 구분할 수 있고, 문자열 Windows Phone을 사용하면 Windows Phone7 이상 버전을 구분할 수 있습니다.