JavaScript로 모바일 브라우저를 감지하는 방법

모바일 감지는 항상 앱 개발의 중요한 측면이었습니다. 앱뿐 아니라 소프트웨어와 웹사이트에도 관련이 있습니다. 모바일 브라우저 에이전트를 확인해야 하는 이유는 셀 수 없이 많습니다. 가장 중요한 것은 독특한 사용자 경험을 제공하는 능력입니다.

UAParser.js 라이브러리만 해도 매주 수백만 건의 패키지 다운로드가 이루어집니다. 그리고 대부분의 경우 처음부터 무언가를 구축하는 것으로 충분합니다. 그러나 JavaScript로 모바일 브라우저를 감지하는 다른 방법은 어떻습니까?

때로는 라이브러리 없이 작업을 수행하는 간단한 솔루션을 원할 수도 있습니다. 그리고 이 기사에서는 모바일 사용자를 감지하기 위한 몇 가지 JavaScript 기술에 대해 설명합니다. 내가 놓친 것이 있으면 알려주십시오!

navigator.userAgent

브라우저 감지의 성배는 navigator.UserAgent 속성입니다.

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

물론 이것은 매우 원시적인 방법입니다. User-Agent 속성을 스푸핑할 수 있으므로 쉽게 조작할 수 있습니다. 그러나 작업을 수행하기 때문에 다양한 프로젝트에서 여전히 사용할 수 있습니다. 예: 랜딩 페이지 또는 모바일 버전으로 사용자 지정 리디렉션 만들기.

navigator.userAgent 를 사용하여 브라우저 유형을 감지하고 특정 브라우저를 기반으로 콘텐츠를 표시하는 방법은 무엇입니까?

좋습니다. Chrome 및 Firefox(이 경우 Android 및 iPhone)와 같은 특정 브라우저를 감지한 다음 해당 데이터를 사용하여 특정 콘텐츠를 표시하려는 고유한 사용 사례가 있을 수 있습니다. 이 접근 방식은 특정 브라우저에 대한 다운로드 링크를 제공/변경하는 데 자주 사용됩니다.

이러한 경우 다음 기능을 사용할 수 있습니다.

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

확인하고 싶지 않은 브라우저에 대한 다양한 else if 문을 주석 처리할 수 있으며 마찬가지로 확인하려는 브라우저를 추가할 수 있습니다.

터치 이벤트

모바일 사용자를 감지하는 한 가지 방법은 장치에 터치 스크린이 있는지 확인하는 것입니다.

GlobalEventHandlers.ontouchstart 속성을 사용하면 사용자가 앱과 상호 작용하는 방식을 간단히 확인할 수 있습니다. 상호 작용이 터치 스크린에서 발생한 경우 모바일 버전의 앱 또는 페이지를 반환할 수 있습니다.

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

Surface와 같은 터치 스크린 장치에는 이 속성이 없습니다. 따라서 데스크톱 기반 터치 장치에서 오는 사용자는 여전히 데스크톱 버전의 페이지를 볼 수 있습니다.

Window.matchMedia()

Window.matchMedia()는 JavaScript로 모바일 사용자를 감지하는 데 가장 적합한 속성 중 하나입니다. CSS와 직접 상호 작용할 수 있기 때문입니다.

많은 경우 미디어 쿼리는 모바일 탐지 도구가 내장되어 있기 때문에 더 우수합니다. 예를 들어 "pointer:coarse" 가 true인지 확인하기 위해 호출할 수 있습니다.

이 특정 명령문은 장치의 포인터가 fine 인지 또는 coarse 인지 확인합니다.

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

또는 장치에 미세 포인터와 대략적 포인터가 모두 있을 수 있습니다. 이 사용 사례의 경우 거친 포인터가 있는지 확인할 수 있습니다.

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

이것은 쿼리의 유효성을 true 또는 false로만 확인한다는 점에 유의하십시오. 모바일 장치를 확인하는 보다 세련된 방법은 미디어 쿼리를 직접 사용하는 것입니다.

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

이 쿼리는 장치의 최대 너비를 직접 확인하고 기준과 일치하는지 확인합니다. 다시 말하지만, 이것은 모든 장치를 올바르게 가져오려면 꽤 많은 작업입니다. 따라서 모든 장치 유형이 이미 정의되어 있는 미리 빌드된 라이브러리를 사용하는 것이 더 쉽습니다.

특정 상황에서 유용

수년 동안 장치 유형을 감지하기 위한 많은 JavaScript 속성이 있었습니다. 그들 중 많은 수가 더 이상 사용되지 않지만 나머지 대부분은 라이브러리에 통합되었습니다. 적절한 모바일 감지를 수행하는 가장 좋은 방법이기도 합니다.

마지막으로, 대부분의 최신 프레임워크에는 이미 프레임워크 자체의 일부로 모바일 감지가 포함되어 있습니다. 모든 다리 작업을 수행하고 싶지 않다면 살펴볼 가치가 있습니다.

모바일 장치 감지용 라이브러리

이 섹션에서는 모바일 장치 감지에 가장 많이 사용되는 JavaScript 라이브러리를 나열하겠습니다. 다시 말하지만, 이것들은 JavaScript에만 해당된다는 점을 강조합니다. 앱에서 적절하게 구현하려면 문서를 참조하세요.

UAParser.js

완전한 라이브러리가 있는 한 UAParser가 최고입니다. npm에서만 매주 천만 건 이상의 다운로드가 가능한 UAParser는 모바일 장치 감지를 위한 사실상의 솔루션입니다. 이름에서 알 수 있듯이 라이브러리는 User-Agent 문자열을 구문 분석하여 작동합니다.

그러나 이것이 인기 있는 이유는 수백 가지 장치 변형을 구문 분석할 수 있다는 사실입니다. 그리고 모든 것이 매우 잘 문서화되어 있습니다. 실제 장치 공급업체에서 CPU 아키텍처와 같은 더 복잡한 감지 패턴으로 이동할 수 있습니다.

모바일 감지.js

이것은 Heinrich Goebl이 커뮤니티에 제공한 PHP용 Mobile Detect 라이브러리의 매우 간단한 포트입니다. 라이브러리 자체는 탐지를 위해 User-Agent를 사용하므로 앞서 논의한 바와 같이 최선의 선택은 아닙니다.

그래도 실용적인 HTML 템플릿이나 포트폴리오 프로젝트에 관해서는 작업을 수행해야 합니다.

isMobile

여기 Kai Mallea의 User-Agent Navigator 속성에 대한 또 다른 설명이 있습니다. 여전히 단순한 솔루션이지만 isMobile이 다양한 사양을 제공한다는 점이 마음에 듭니다. 예를 들어 모든 휴대기기 또는 휴대전화 나 태블릿 과 같은 특정 기기에 대해 테스트할 수 있습니다.

반응 장치 감지

React.js 개발자입니까?

그렇다면 Michael Laktionov의 이 라이브러리가 당신을 위한 것입니다. 예상대로 작동합니다. 먼저 라이브러리가 장치 유형을 감지한 다음 해당 유형을 기반으로 보기를 렌더링합니다. 구성 요소 통합과 완벽하게 작동하며 API 호출을 통해 추가로 사용자 정의할 수 있습니다.

흥미로운 사실 ​​중 하나는 이 라이브러리에 포함된 선택기의 수입니다. 여기에는 스마트 TV, 웨어러블, 다양한 iPhone 장치 등과 같은 장치가 포함됩니다. 이를 통해 특정 장치용 앱을 빌드할 때 디자인 선택의 폭을 넓힐 수 있습니다.