Juwan Park :: 접속한 기기가 모바일인지 아닌지 확인하는 자바스크립트

접속한 기기가 모바일인지 아닌지 확인하는 자바스크립트

★프로그래밍/HTML, CSS, JS, XML :: 2016. 8. 11. 22:33
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

일단 이 한 줄의 코드만으로도 모바일인지 아닌지 간단하게 검출 가능합니다.
만약 모바일에서 접속했다면 true 값을 돌려줄 것이고 그렇지 않다면 false 값을 돌려줄 것입니다.

하지만 정말로 이 한 줄만 가지고는 단지 검출만 가능할 뿐이지 사용자에게 직접 보여줄 수는 없습니다.
어떻게 하면 사용자에게 직접 모바일 접속 여부를 보여줄 수 있을까요?

일단 코드가 너무 기니 함수를 선언해 봅시다.

function isMobile() {
	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

이 함수를 선언하면, isMobile() 함수 호출시 모바일에서 접속하면 true 값을, 모바일이 아닌 일반 PC에서 접속하면 false 값을 돌려줄 것입니다.

하지만 이걸로는 아직 부족합니다. 어떻게 할까요?
일단 isMobile() 함수를 미리 정의해 두었다고 가정하고

if (isMobile()) {
	// 모바일이면 실행될 코드 들어가는 곳
} else {
	// 모바일이 아니면 실행될 코드 들어가는 곳
}

이렇게 조건문을 통해 모바일 여부에 따른 코드 실행이 가능합니다.


아래 버튼을 눌러 봅시다. userAgent 코드를 이용한 모바일 여부 검출 스크립트를 삽입하였습니다. 이 버튼은 모바일에서 접속했는지의 여부에 따라 다른 메시지를 띄웁니다.
(참고: 모바일로 접속하였더라도 'PC버전 보기' 옵션을 켜고 접속한 상태라면 모바일이 아닌 것으로 인식할 수 있습니다.)

물론 응용하면 다양한 방향으로 코드를 작성할 수도 있습니다.

유용하게 활용하시기 바랍니다.

댓글을 달아 주세요.

  1. Favicon of https://arangkorea.tistory.com 예술아치 2021.01.13 18:38 신고 Reply Address Modify/Delete Reply

    오래된 홈페이지를 가지고 있는데 모바일로 접속하니 글자들이 너무 작게 보여 모바일용 웹페이지를 따로 만들려 합니다.
    웹개발을 안한지 너무 오래되어서 몇가지 여쭤보고 싶습니다.

    제 홈페이지 는 cleanwork.co.kr 이고 php로 제작 되었습니다.
    저 코드를 php에 넣어서 사용하는건지 css를 만들어서 사용하는건지 궁금합니다.

    function isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    if (isMobile()) { m.naver.com
    // 모바일이면 실행될 코드 들어가는 곳
    } else { www.naver.com
    // 모바일이 아니면 실행될 코드 들어가는 곳
    }

    그리고 내용을 이렇게 집어 넣으면 될까요?

    • Favicon of https://parkjuwan.tistory.com Juwan Park 2021.05.31 21:55 신고 Reply Address Modify/Delete

      저 코드는 <script type="text/javascript"></script> 태그 안에 넣는 것이므로 HTML 문서 안에 넣는 것입니다.
      그러므로 PHP에 넣어서 사용하면 되겠습니다.

Today 1    Yday 29    Tot 109,607
Juwan Park
Juwan Park's blog is powered by Daum and TISTORY.
Contemporary Blue for TISTORY.
Designed by Juwan Park. Creative Commons License
▲ TOP