jQuery를 사용하여 사용자가 모바일 장치를 사용하고 있는지 어떻게 감지할 수 있나요?

jQuery를 사용하여 모바일 장치를 감지하는 방법

사용자가 모바일 장치에서 웹사이트에 액세스하는지 여부를 감지하면 그에 따라 콘텐츠 또는 사용자 경험. 널리 사용되는 JavaScript 라이브러리인 jQuery는 이러한 탐지를 수행하는 방법을 제공하지만 $.browser 기능은 제한적이고 잠재적으로 부정확한 정보를 제공하므로 권장되지 않습니다.

대신 JavaScript와 CSS를 조합하여 사용할 수 있습니다. 모바일 장치를 감지합니다. 한 가지 접근 방식은 사용자의 장치, 브라우저 및 운영 체제에 대한 정보가 포함된 navigator.userAgent 속성을 사용하는 것입니다. navigator.userAgent 문자열의 알려진 값과 장치 감지 논리를 비교하면 모바일 장치가 사용되고 있는지 확인할 수 있습니다.

다음은 간단한 JavaScript를 사용하여 이를 수행할 수 있는 방법의 예입니다.

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  // Some code for mobile devices
}

jQuery를 통해 더 쉽게 액세스할 수 있도록 다음과 결합할 수 있습니다.

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

이렇게 하면 모바일 장치가 사용 중인지 여부를 나타내는 "device" 속성이 있는 $.browser 개체.

참고: 포함된 jQuery $.browser 메서드는 jQuery v1.9.1에서 제거되었습니다. 이 방법을 사용해야 하는 경우 이전 jQuery 버전에 대한 호환성 레이어를 제공하는 jQuery 마이그레이션 플러그인을 설치할 수 있습니다.

더 철저한 접근 방식:

var isMobile = false; // Initialize as false
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
  isMobile = true;
}

이 버전은 더 광범위한 모바일 장치를 포괄하는 보다 철저한 감지 메커니즘을 제공합니다.

사용자 에이전트 감지를 사용하는 것은 최신 웹에서는 권장되지 않습니다. 제한 사항과 부정확성으로 인해 적용이 불가능합니다. 가능하다면 대신 기능 감지나 미디어 쿼리를 사용해 보세요.

위 내용은 jQuery를 사용하여 사용자가 모바일 장치를 사용하고 있는지 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!