javascript/jquery로 모바일 브라우저를 감지하는 가장 좋은 방법은 무엇입니까?

Question

내가 일하고있는 사이트의 경우 JavaScript가있는 이미지 미리로드를 구현하고 있지만 느린 대역폭을 사용하는 사람은 내 preload_images() 함수를 호출하고 싶지 않습니다.

저의 경우 대역폭이 느린 사람은 스마트 폰에서 모바일 인터넷을 사용하는 사람들뿐입니다.

이러한 사용자를 감지하여 이미지 미리로드를 피할 수있는 최선의 방법은 무엇입니까?

---

옵션 1 : 검출 브라우저

if($(window).width() > 960){ preload... } 

---

옵션 2 폭 :

if($.browser in array safelist){ preload... } 

---

들이기 미리로드 브라우저의 목록을 사용자 에이전트를 검출 거기 더 나은 옵션이 있습니까?

Answer 1

숨겨진 개체와 함께 CSS @media 지시문을 사용하고 있을까요?

.imagesToPreload {display:none;} 
@media screen { 
    #imageToPreload1 {background-image:url('blah.img');} 
} 
@media handheld { 
    #imageToPreload1 {background-image:none;} 
} 

그런 다음 자바 스크립트에서, 당신은 BackgroundImage 속성을 읽고 그 None이 아니라면 그것을 미리로드 "imagesToPreload"클래스에있는 모든 개체를 가져올 수 있습니다.

틀림없이, 이것은 내 머리 꼭대기에서 떨어져 있습니다. 나는이 아이디어를 테스트하지 않았습니다. 늘 그렇듯이 내가 생각하고 있지 않은 것이있을 것입니다 ...

Answer 2

특정 장치 나 환경에서 액세스해야하는 사이트의 버전을 결정하는 사이트를 싫어하는 것을 발견했습니다. 당신이 정한 기준에 기초하여 초기 결정을 내리는 것은 좋지만, 선을 위해 내가 클릭 할 수있는 링크를 제공하여 "높은 대역폭 사이트"를 선택하거나 그 반대의 경우와 반대로 쿠키에 저장하십시오. 그런 다음 자동 스크립트가 내 판단에 따라 오류를 무시할 수 있습니다.

Answer 3

필자는 모바일에 대한 edeverett의 관점이 반드시 느린 것은 아니며 비슷한 데스크탑이 반드시 빠르지는 않을 것이라고 생각합니다.

귀하의 방문자에게 선택의 여지를 남기지 않도록하십시오. 즉, 대부분의 괜찮은 모바일 브라우저는 이미지를로드하지 않도록 (또는 큰 이미지를로드하지 않도록) 이미지를 압축하는 프록시 서비스를 사용할 수 있습니다. 일부 모바일 방문자는 사이트에 전체 미리로드 된 경험을 원합니다. 바탕 화면보다 더 제한하기 위해 모바일 브라우징 경험에이 예전보다 적은 이유가 if($(window).width() < 320){ preload_smaller_images(); } :

또 다른 해결책은 같은 것을 할 수 있습니다.

(이 CSS에서 할 수 있으면, 그것은 IMO한다)

R. 힐의 CSS 제안이 최악의가 있지만, 그것은 또한 수행 할 수 있습니다하지 않는 당 - 화면 크기 : @media handheld, screen and (max-width: 320px){ /* */ }