자바스크립트는 휴대폰을 식별해 모바일 웹사이트로 점프한 뒤 컴퓨터 버전으로 돌아간다.

오늘날의 모바일 인터넷 시대에는 점점 더 많은 사용자가 휴대폰을 통해 웹을 탐색하는 것을 선호합니다. 따라서, 다양한 디바이스에 적합한 웹사이트를 제공하는 것이 불가피한 추세가 되었습니다. 이러한 맥락에서 사용자가 컴퓨터 버전과 모바일 버전 사이를 쉽게 전환할 수 있도록 하는 방법이 핵심이 되었습니다.

그 중 사용자가 사용하는 기기를 Javascript 코드를 통해 식별하고 해당 웹 사이트의 해당 버전으로 자동으로 이동하는 것이 일반적인 방법입니다. 다음으로 이 글에서는 이 방법의 구현 과정을 소개하겠습니다.

1. 기기 유형 감지

사용자가 어떤 기기를 사용하고 있는지 아는 것이 모바일 버전으로 이동해야 하는지 판단하는 전제 조건입니다. 이를 위해서는 Javascript의 navigator.userAgent 속성을 통해 사용자의 장치 정보를 얻어야 합니다.

샘플 코드는 다음과 같습니다.

// 判断是否为移动设备
function isMobile() {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

이 기능을 통해 사용자가 모바일 기기를 사용하고 있는지 여부를 감지할 수 있습니다. 테스트 결과가 사실이라면 사용자가 모바일 장치를 사용하고 있으며 웹사이트의 모바일 버전으로 이동해야 함을 의미합니다.

2. 모바일 버전 웹사이트로 이동

탐지 결과 사용자가 모바일 장치를 사용하고 있는 것으로 나타나면 사용자를 모바일 버전 웹사이트로 리디렉션해야 합니다.

구체적인 방법은 다음과 같습니다.

if (isMobile()) {
   window.location.href = "http://m.example.com";
}

이 코드에서는 사용자가 모바일 장치인지 확인하는 방법이 위에서 언급한 isMobile() 함수를 호출하여 조건이 충족되면 사용자를 모바일 장치로 리디렉션합니다. 모바일 버전의 웹사이트. 여기의 리디렉션Url을 실제 모바일 버전 웹사이트 URL로 바꿔야 합니다.

3. 컴퓨터 버전 홈페이지로 돌아가기

이용자의 편의를 위해 모바일 버전 홈페이지에서는 '컴퓨터 버전 홈페이지로 복귀'할 수 있는 링크를 제공해야 합니다. 이 기능을 구현할 때 Javascript 코드를 통해 사용자의 장치 유형을 감지하는 것도 필요합니다. 사용자가 PC 장치를 사용하는 경우 사용자는 웹 사이트의 데스크톱 버전으로 리디렉션되어야 합니다.

샘플 코드는 다음과 같습니다.

// 判断是否为 PC 设备
function isPC() {
   return !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// 点击“回到电脑版网站”时，跳转到电脑版网站
$("#returnToPC").click(function(){
   if (isPC()) {
       window.location.href = "http://www.example.com";
   }
});

이 코드에서는 사용자가 PC를 사용하고 있음을 감지한 후 이 링크를 클릭하면 "PC 버전 웹사이트로 돌아가기" 링크가 클릭 이벤트에 바인딩됩니다. 해당 PC 버전의 웹사이트로 이동합니다.

요약

위에서 언급한 것처럼 Javascript로 사용자 장치 유형을 식별하고 해당 웹사이트의 해당 적응 버전으로 점프하고 컴퓨터 버전의 웹사이트로 돌아가는 기능을 제공하는 것은 많은 웹사이트의 기반입니다. 크로스 플랫폼 브라우징을 달성합니다. 실제 사용에서는 사용자의 요구를 더 잘 충족시키기 위해 다양한 비즈니스 요구에 따라 최적화하고 확장해야 합니다.

위 내용은 자바스크립트는 휴대폰을 식별해 모바일 웹사이트로 점프한 뒤 컴퓨터 버전으로 돌아간다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!