JavaScript가 모바일 브라우저를 감지합니다

1. 사용 된 장치를 감지하여 모바일 브라우저 감지
2. 터치 스크린으로 모바일 브라우저 감지

JavaScript는 웹 기반 애플리케이션 개발에 널리 사용됩니다. 이러한 애플리케이션의 대부분은 모바일 브라우저와도 호환됩니다.

이 튜토리얼은 JavaScript를 사용하여 모바일 브라우저를 감지하는 데 사용할 수있는 다양한 방법을 보여줍니다.

사용 된 장치를 감지하여 모바일 브라우저 감지

JavaScript를 사용하여 모바일 브라우저를 식별하는 가장 간단하고 직접적인 방법은 현재 시장에서 사용 가능한 다양한 장치 목록을 살펴보고useragent가 사용 가능한 목록에있는 장치 중 하나를 보완하는지 확인하는 것입니다.

다음은 우리가 작업 할 함수의 코드 스 니펫입니다.

function detectMob() {
  const toMatch = [
    /Android/i, /webOS/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i,
    /Windows Phone/i
  ];

  return toMatch.some((toMatchItem) => {
    return navigator.userAgent.match(toMatchItem);
  });
}

현재 사용 가능한 대부분의 모바일이 훨씬 더 높은 해상도를 제공하더라도 해상도가 800x600 이하이면 대상 장치가 모바일이라고 가정하여 모바일 장치 검색 범위를 더욱 좁힐 수 있습니다.

따라서 오탐을 방지하기 위해 두 가지 방법을 모두 사용하고 사용 된 장치를 감지하고 장치의 해상도를 가장 효율적으로 감지하는 것이 좋습니다.

다음은 사용자가 사용중인 기기의 해상도를 감지하는 코드입니다.

function detectMob() {
  return ((window.innerWidth <= 800) && (window.innerHeight <= 600));
}

터치 스크린으로 모바일 브라우저 감지

사용자가 조작하는 대상 장치가 모바일 장치인지 확인하는 또 다른 방법은 사용자가 터치 식 장치를 사용하고 있는지 확인하는 것입니다. 오늘날 시장에 나와있는 모든 휴대폰은 터치 방식이므로이 방법은 안정적이고 효율적입니다.

그러나이 방법은 터치 식으로 작동하기 때문에 태블릿도 포함하는 한 가지 제한이 있습니다.

다음 코드를 사용하여 장치가 터치 스크린을 사용하여 작동하는지 확인하여 모바일 브라우저를 감지 할 수 있습니다.

var touchDevice = ('ontouchstart' in document.documentElement);

이 기능은 휴대폰과 태블릿뿐 아니라 터치 스크린을 지원하는 데스크톱과 노트북까지 확장 할 수 있습니다.

var touchDevice = ('ontouchstart' in document.documentElement);