JS는 모바일 장치를 감지

모두 안녕! 이건 제 글 쓰는 헬로월드랑 좀 비슷한 것 같으니 너무 가혹하게 굴지 마세요😄

부인 성명

나는 이것이 최선의 방법이라고 주장하는 것이 아니며 장치가 "인기있는"모바일 장치인지 확인하는 가장 완벽한 방법이라고 부르지 않을 것입니다. 그러나 간단하고 대부분 올바르게 작동해야 합니다. (문제를 보거나 찾으면 언제든지 알려주세요.) 마지막으로 중요한 것은 제가 이 문제를 생각해내지 못했다는 것입니다. 나는 그것을 찾았고 게시물을 다시 찾으면 여기에 링크를 공유할 것입니다.

소개

첫째, 실제 화면 크기에 따라 스타일을 적용하려는 경우입니다. (내 의견) 일단 이해하면 매우 안정적인 기본 제공 CSS 미디어 쿼리를 사용하십시오.

특정 기능이 모바일 또는 데스크톱에서만 트리거되도록 하려면 이에 대한 사용 사례가 더 많습니다.

이제 그 문제를 해결했으므로 여기에 해결책과 간단한 설명이 있습니다.

var agentDetails = navigator.userAgent;

function isMobile() {
  if(/Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agentDetails) ) {
    // Hit here if the device is a "popular-ish" mobile device
  } else {
    // Hit here if the device is  NOT a "popular-ish" mobile device
  }
}

설명

좋아, 그럼 해부 시작하자 ...

첫 번째 줄var agentDetails = navigator.userAgent은 사용된 브라우저에 대한 user agent data을 가져옵니다.

즉, 현재 장치와 관련된 Platform, Security, OS-or-CPU, Localization, revision-version-number를 가져옵니다. (작성 당시)
여기에는 우리가 보고자 하는 정보가 포함되며 아래 Codepen의 흰색 텍스트가 됩니다.

두 번째 중요한 부분은 if() 문입니다. if()의 문자열은 처음에 /가 있고 끝에 /i가 있습니다(끝에 /i는 대소문자를 구분하지 않음)
이렇게 하면 문자열의 regular expresion이 생성됩니다. (이것은 전체 다른 시리즈일 수 있습니다 😅)

정규식으로 만드는 이유는 "정규식과 지정된 문자열 간의 일치 검색을 실행하는".test() 메서드를 사용할 수 있기 때문입니다. 당신은 그것에 대해 더 읽을 수 있습니다 here

따라서 사용자 에이전트 데이터가 예를 들어 반환되는 경우:
"Mozilla/5.0(iPad; Mac OS X와 ​​같은 CPU OS 15 5) AppleWebKit/605.1.15(Gecko와 같은 KHTML) Mobile/15E148"

이것은 iPad일 것이므로 우리가 확인하는 문자열(사용자 에이전트)과 정규식 모두 iPad라는 단어를 포함하므로 true를 반환합니다.

결론

여기까지가 약속대로 제가 만든 Codepen입니다. 화려하지도, 예쁘지도 않지만 작동합니다.
사용자 에이전트 문서에서 볼 수 있듯이 이 정보는 사용자 또는 타사 앱에서 변경할 수 있습니다. 결과가 다를 수 있으므로 주의하십시오.