무아지경 – 모바일 환경과 PC 환경 구분하여 UI 적용하기

 

 

 

무아지경의 블로그 타이틀과 포스팅 제목은 

PC 환경에서는 flash로 보입니다.

 

 

iphone은 flash 를 지원하지 않아서 어떻게 할까 고민했는데…

(지금껏 안 고치고 있다가)

javascript 를 이용하여 클라이언트 종류를 확인하고 

그에 맞는 UI를 표시하도록 구성을 변경하였습니다.

 

 

[PC에서 본 화면]

 

 

[iphone에서 본 화면]

사용자 삽입 이미지

 

 

 

아래는 제가 활용한 script의 예제 입니다.

DOM 객체 document.write()를 이용해서 모바일이 아닌 경우는 플래쉬 관련 태그들을 삽입하고

아닐 경우에는 일반 html 태그를 삽입하도록 해서 구현 했습니다.

 

function check() {

var UserAgent = navigator.userAgent; 

if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null)

{

alert(“mobile!”);

//원하는 펑션 document.write()를 이용해서 일반 html 태그 삽입

}

else{

alert(“Normal computer!”);

//원하는 펑션 document.write()를 이용해서 플래쉬 관련 태그 삽입

}

}