프로젝트하면서 찾은 자료를 정리해서 공유합니다.
보충할 점이나 정정할 부분이 있다면 댓글 부탁드립니다.
1. [Javascript] navigator.platform 이용
Navigator platform 도규멘트
Navigator platform Property
화면 사이즈를 통해서 접속환경을 구분한다.
소스를 이용해 기존 코드에 모바일 혹은 pc에 맞는 설정으로 변경 가능하다.
<!DOCTYPE html>
<html>
<head>
<title>Check Mobile</title>
</head>
<script>
let filter = "win16|win32|win64|mac|macintel";
if(0 > filter.indexOf(navigator.platform.toLowerCase())){
console.log("Client platform : Mobile");
}else{
console.log("Client platform : PC");
}
</script>
</html>
사용가능한 플랫폼 종류
Possible values:
HP-UX
Linux i686
Linux armv7l
Mac68K
MacPPC
MacIntel
SunOS
Win16
Win32
WinCE
Etc..
2. [Javascript] navigator.platform 이용 2
pc 플랫폼인지 감지해서 그렇지 않은 경우 모바일로 판단하는 소스이다.
find는 일치하는 요소의 첫번째를 반환한다.
중간에 끊을 수 없는 foreach 대신으로 알맞다.
function 모바일체크() {
if( ['Win16','Win32','Win64','Mac','MacIntel'].find(element => element == navigator.platform) ) {return false;}
else {return true;}
} - 화살표 함수 주의할 점
IE에서는 지원하지 않으므로 주의해야 한다.
그런 경우에는 1번 방법을 사용해도 좋을 것이다.
3. [Javascript/jQuery] navigator agent 이용
앞서 1, 2번은 pc인지 아닌지 감지하는 방법이다.
그래서 모바일을 감지해야하는 경우에는 3번이 적절하다.
소스는 아래 사이트에 접속하여
Javascript, jQuery 등 원하는 버튼을 클릭해 다운로드 할 수 있다.
아래는 Javascript를 이용한 예제이다. 🔽
<script src="detectmobilebrowser.js"></script>
<script>
console.log(jQuery.browser.mobile);
</script>아래는 jQuery를 이용한 예제이다. 🔽
모바일, pc일 때 나타날 요소를 구분할 수 있다.
<script>
if(jQuery.browser.mobile == true){
$('.pc').css({display:'none'});
} else {
$('.mobile').css({display:'none'});
}
</script>
참조 사이트
모바일 기기 감지하는 4가지 방법
[Javascript] 접속환경(Mobile/PC) 확인하기
javascript 모바일 감지
비전공자가 백엔드 개발자 도전하는 블로그