모바일 디바이스 분기 / Javascript 반응형 처리

 

사용자들이 Web App을 모바일 디바이스에서 사용하는 비율이 늘어남에 따라, 우리는 작업을 하면서 Web App의 모바일 화면을 자주 확인해야 합니다.

이번 포스팅에서는 Javascript로 모바일 디바이스를 감지하고 분기처리 하는 방법을 알아보겠습니다.

 

1. User Agent Detection

모바일 디바이스 분기 처리를 하는 한 가지 방법은 user agent를 이용하여 확인하는 방법입니다. 이 방법은 난이도가 쉽기 때문에 많이 사용되고 있지만 가장 좋은 방법은 아닙니다. user agent string이 쉽게 spoofing 될 수 있기 때문입니다.

우리는 navigator.userAgent 속성을 이용해 user agent string을 얻을 수 있습니다.

User Agent 확인 가능 사이트

1.1. 예시 코드

// 예시 코드 01
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { // Mobile
  console.log('true')
} else { // PC
  console.log('false')
}

// 예시 코드 02
function isMobile(){
    const userAgent = navigator.userAgent;
    if (userAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || userAgent.match(/LG|SAMSUNG|Samsung/) != null) {
        return true;
    } else {
        return false;
    }
}

if(isMobile()) { // Mobile
    // mobile only code

} else { // PC
    // pc only code
}

 

2. Check Screen Size

사용자가 Web App에 접근하는 스크린 사이즈를 확인하여 모바일 디바이스를 감지할 수 있습니다. user agent와 함께 가장 쉽게 자주 사용됩니다.

2.1. 예시 코드

// javascript
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
if (isMobile) {
    // mobile only code
}

// jQuery
if($(window).width() <= 768) {
    // mobile only code
}

 

3. Check for Touch Events

Javascript 코드로 터치 이벤트를 식별하여 감지할 수도 있습니다. ontouchstart 이벤트는 터치 스크린이 있는 디바이스에서만 동작하므로 이 이벤트 사용 여부를 통해 모바일 디바이스를 식별합니다.

3.1. 예시 코드

const isMobile = (document.documentElement의 'ontouchstart' && navigator.userAgent.match(/Mobi/));
if (isMobile) {
    // mobile only code
}

 

4. Ratio

해상도를 이용해 모바일 디바이스를 감지할 수 있습니다. 모바일 디바이스는 해상도를 *2 이상 사용하기 때문에 아래와 같이 조건을 걸어 모바일을 분기할 수 있습니다.

4.1. 예시 코드

var ratio = window.devicePixelRatio;

if(ratio > 1){ // Mobile
    // mobile only code
} else { // PC
    // pc only code
}

 

5. The navigator.platform Property

navigator.platform 속성을 이용할 수 있습니다. 이 속성은 navigator.userAgent와 마찬가지로 user agent string을 포함합니다. 또한 navigator.userAgent보다 신뢰성이 높습니다.

5.1. 예시 코드

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // mobile only code
}

 

이번 포스팅에서는 JavaScript로 반응형 처리를 하기 위한 조건문을 다양하게 살펴보았습니다. 도움이 되셨길 바랍니다.

 

감사합니다.