javascript를 이용한 모바일 여부를 확인하는 방법에 대해 여러 블로그에서 소개되고 있는데요.
여러 브라우저에서 개발자 모드의 모바일 에뮬레이션을 이용했을 때 navigator.userAgent 값을 가지고 여러가지 테스트를 할 수있어 그 방법을 공유하고자합니다.
우선 아래처럼 html을 html을 사용하는 파일로 저장 한 후보기 또는 익스플로러에서 실행 해 봅니다.
<! doctype html> <html> <헤드> <meta name = "viewport"content = "initial-scale = 1, maximum-scale = 1"> <title> 확인 </ title> </ head> <본체> <h3> navigator.platform : </ h3> <p> <script> document.write (navigator.platform); </ script> </ p> <h3> navigator.userAgent : </ h3> <p> <script> document.write (navigator.userAgent); </ script> </ p> </ body> </ html>
크롬과 익스플로러에서 해당 html 파일을 실행 아래 화면과 같은 결과를 확인할 수 있습니다.
<크롬 브라우저 결과 화면>
<익스플로러 브라우저 결과 화면>
이때 크롬과 익스플로러에서 F12 키를 누르시면 개발자 모드가 실행 크롬은 다음 영역에 모바일보기 버튼을 클릭하고 왼쪽 영역에서 원하시는 단말기를 선택하고 익스플로러는 "에뮬레이터"탭을 선택하신 후 브라우저 프로필을 WindowsPhone 선택 하고 나머지 옵션을 원하시는대로 선택하신 후 새로 고침을 navigator.userAgent에 대해 선택하신 단말기의 정보로 확인이 가능합니다.
<크롬 브라우저 모바일 단말기 모드 적용 화면>
<익스플로러 브라우저 모바일 단말기 모드 적용 화면>
공통적으로 navigator.platform의 값은 해당 html을 접속 한 플랫폼 정보를 얻을 수 있습니다.
navigator.userAgent 값은 브라우저의 개발자 모드로 쉽게 변경해 가며 다른 값을 얻을 수 있다는 것을 확인할 수 있습니다.
즉, navigator.userAgent를 이용해서 모바일 여부를 확인한다면 사용자가 브라우저의 개발자 모드를 이용해서 얼마든지 선회해서 접근 할 수있다라는 것입니다. 예를 들어 웹뷰를 이용한 앱을 개발하여 배포 된 PC가 아닌 모바일에서만 필히 서비스를 제공해야 할 필요가있는 경우 navigator.userAgent를 사용할 때 좀 더 고민해 보겠습니다.
결론은 간단하게 navigator.platform을 이용하여 PC 홈페이지 인 경우는 모바일이 아닌 것과 같이 브라우저를 닫는 처리를 하는게 제일 좋은 방법이 아닐까 싶습니다.
<스크립트>
var filter = "win16 | win32 | win64 | mac";
if (navigator.platform && filter.indexOf (navigator.platform.toLowerCase ())> = 0) {
alert ( "모바일이 아닙니다.");
window.close ();
}
</ script>
'Programing' 카테고리의 다른 글
| Permission denied 에러로 톰캣 실행이 안될 때 (0) | 2018.02.22 |
|---|---|
| iptime 공유기 비밀번호 설정 및 초기화 (0) | 2018.02.10 |
| jQuery 우측 슬라이드 메뉴 만들기 (0) | 2017.11.02 |
| JAVA 로또 번호 JSON 방식으로 불러오기 (0) | 2017.11.01 |
| MSSQL Server 스케쥴러 (에이전트) 등록 방법 (1) | 2017.11.01 |