navigator.userAgent

브라우저 API에서 제공하는 userAgent 문자열을 확인하는 방법. userAgent는 유저 디바이스의 정보를 담고 있다. 자바스크립트에선 navigator.userAgent 속성으로 접근할 수 있다.

userAgent 문자열이 mobi, android iphone 등 키워드를 담고 있다면 모바일 기기로 접속했다고 볼 수 있다. 가장 간단한 방법이지만 사용자가 직접 userAgent 값을 수정할 수 있기 때문에 100% 신뢰할 순 없다.

// 방법 1
// 정규식은 기본적으로 대소문자를 구분한다. i 플래그로 대소문자를 구분하지 않도록 할 수 있다
if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
	// 현재 장치는 모바일 기기
}

// 방법 2
if (
  navigator.userAgent.match(/Mobi/i) ||
  navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/iPhone/i)
) {
	// 현재 장치는 모바일 기기
}

Chromium 계열의 브라우저는 userAgent와 비슷한 역할을 하는 navigator.userAgentData 라는 속성이 있다. 차이점은 사용자 에이전트 문자열을 객체로 파싱하고, 해당 객체 안의 mobile 속성을 통해 사용자의 모바일 장치 사용 여부를 boolean 값으로 확인할 수 있다.

const isMobile = navigator.userAgentData.mobile;

<aside> 💡 애플의 Safari와 Firefox는 userAgentData 속성을 지원하지 않는다. 자세한 내용은 caniuse 참고

</aside>

window.screen, window.innerWidth

스크린 너비를 통해 모바일 디바이스인지 확인하는 방법. window.screen 객체는 유저 디바이스의 스크린 정보를 반환한다(모니터 사이즈). 이 객체의 width 속성이 바로 스크린 너비. 유저가 가로모드로 핸드폰을 사용한다면 모바일 기기인지 식별할 수 없는 단점이 있다.

if (window.screen.width < 500) {
	// 현재 장치는 모바일 기기
} 

또 다른 속성인 window.innerWidth 는 브라우저 창 안쪽의 뷰포트(사용자에게 보여지는 영역) 너비를 반환한다. 스크롤바도 포함한 값이다. 웹페이지의 각 너비마다 다른 스타일을 지정할 때 유용하다.

• 🔍️ Window Size 관련 속성 참고 이미지

const getBrowserWidth = () => {
  if (window.innerWidth < 768) {
    return "xs";
  } else if (window.innerWidth < 991) {
    return "sm";
  } else if (window.innerWidth < 1199) {
    return "md";
  } else {
    return "lg";
  }
};

window.orientation