javascript를 이용한 모바일 여부를 확인하는 방법에 대해 여러 블로그에서 소개 되고 있는데요.
각종 브라우저에서 개발자 모드의 모바일 에뮬레이션을 이용했을 때 navigator.userAgent 값을 가지고 여러가지 테스트를 할 수 있어 그 방법을 공유하고자 합니다.
우선 아래처럼 html을 작성한 후 html 확장자의 파일로 저장한 후 크롬 또는 익스플로러에서 실행해 봅니다.
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <title>check</title> </head> <body> <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 운영체제인 경우는 모바일이 아닌 것으로 간주하여 브라우저를 닫는 처리를 하는게 제일 좋은 방법이 아닐까 싶습니다.
<script>
var filter = "win16|win32|win64|mac";
if (navigator.platform && filter.indexOf(navigator.platform.toLowerCase()) >= 0) {
alert("모바일이 아닙니다.");
window.close();
}
</script>
'IT' 카테고리의 다른 글
| C에서 "부호없는 long"을 인쇄하는 방법은 무엇입니까? (0) | 2020.03.08 |
|---|---|
| MySQL 소개 (0) | 2017.11.15 |
| jQuery 우측 슬라이드 메뉴 만들기 (0) | 2017.11.15 |
| JAVA 로또 번호 JSON 방식으로 불러오기 (0) | 2017.11.15 |
| MSSQL Server 스케쥴러 (에이전트) 등록 방법 (0) | 2017.11.15 |