[js, Next.js] 웹페이지 접속기기 종류 체크(모바일, 웹)

[js, Next.js] 웹페이지 접속기기 종류 체크(모바일, 웹)

1. 반응형 웹을 사용할 때, css의 @media screen을 통해 PC와 모바일 화면을 다르게 설정한다.

2. 독자적인 모바일 기기용 UI를 구현할 경우, 홈페이지에 접속하는 기기가 모바일 기기 여부 또는 안드로이드 인지 아이폰인지 종류를 확인을 해야하는 경우가 생긴다.

3. 모바일 화면에선 일부 css나 자바스크립트를 로드하지 않게 하여 성능 최적화를 노릴때도 모바일 기기 감지가 필수적이다.

 

모바일 / PC 구분하기
​자바스크립트에서 접속자의 브라우저 정보 및 디바이스 정보를 가지고있는 User-Agent 라는 객체를 사용하여 아이폰, 아이패드, 아이팟, 안드로이드 기기 여부를 확인해 true/false를 반환하는 방식으로 간편하게 구현할 수 있다.

 

js

// 안드로이드와 아이폰을 검사해 체크하는 방법이다.
let isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

isMobile = 모바일(안드로이드 or 아이폰)일 경우 true, 아닐 경우 false이다.

 

 

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

모바일(전체)일 경우 true, 아닐 경우 false를 반환하는 함수를 구현할 수 있다.

 

 

Next.js (방법은 js에서도 사용 가능하다)

let isMobile = /Mobi/i.test(window.navigator.userAgent);

isMobile = 모바일(안드로이드 or 아이폰)일 경우 true, 아닐 경우 false이다.

 

 

/**
 * 접속 기기 확인
 * @param data
 * @returns 모바일(전체)일 경우 true, 아닐 경우 false를 반환하는 함수를 구현할 수 있다.
 */
export const isMobi = (data: NextPageContext) => {
  const userAgent = data.req?.headers["user-agent"];
  if (/Mobi/i.test(userAgent)) return true;
  else return false;
};

"Mobi" 가 User agent에 포함되어 있으면 모바일이다.