[아카이브] PC와 모바일 환경에 따라 다른 URL로 연결하는 JS 함수

웹사이트에서 PC와 모바일 사용자에게 각각 다른 경험을 제공해야 할 때가 있습니다. 특히 PC에서만 제대로 작동하는 기능이나 모바일에 최적화된 별도 페이지로 연결해야 하는 경우, 사용자의 디바이스를 감지하여 적절한 URL로 연결하는 기능이 필요합니다.

이 글에서는 JavaScript와 미디어 쿼리를 활용해 PC 사용자는 새 탭으로 특정 URL을 열고, 모바일 사용자는 다른 URL로 리다이렉트하는 함수를 구현해 보겠습니다. 이 방법은 별도의 라이브러리 없이 순수 JavaScript만으로 구현 가능합니다.

 

 

① PC에서는 새탭으로 이동, 모바일에서는 alert창 띄워서 접속 막기

function pcOnlyLink(url) {
    const isMobile = window.matchMedia('(max-width: 768px)').matches;

    if (isMobile) {
        alert('해당 링크는 PC만 접속 가능합니다.');
        return false; // 링크 이동 방지
    } else {
        window.open(url, '_blank'); // PC에서는 새 탭으로 열기
        return false; // 원래 링크 이동 방지
    }
}

// 사용 예:
// <a href="#" onclick="return pcOnlyLink('https://example.com');">PC 전용 링크</a>

 

 

② PC에서는 새 탭으로 이동, 모바일에서는 현재 탭에서 링크로 이동

function deviceSpecificLink(pcUrl, mobileUrl) {
  const isMobile = window.matchMedia('(max-width: 768px)').matches;
  
  if (isMobile) {
    // 모바일 환경에서는 모바일용 URL로 이동
    window.location.href = mobileUrl;
  } else {
    // PC 환경에서는 PC용 URL을 새 탭으로 열기
    window.open(pcUrl, '_blank');
  }
  
  return false; // 원래 링크 이동 방지
}

// 사용 예:
// <a href="#" onclick="return deviceSpecificLink('https://pc-example.com', 'https://mobile-example.com');">환경별 링크</a>

 

 

모바일을 판단하는 기준은 768px 아래는 모바일로 판단