글로벌 프레임 워크 (부트 스트랩, 파운데이션 ...) 스마트 폰용 JS 감지

Question

나는이 두 번 발견했습니다. 때로는 재단이나 부트 스트랩과 같은 선택한 프레임 워크가 스마트 폰이 될 실제 장치를 감지했는지 알아 내야 할 필요가 있습니다. window.width()를 사용하면 프레임 워크가 실제로 스마트 폰 콘텐츠를 표시하는지 여부를 확인하는 것이 더 안전하고 안정적입니다 (특히 SASS에서 중단 점을 변경하고 JS를 수동으로 변경하지 않으려는 경우).

이렇게하려면 가장 좋은 방법은 머리글/바닥 글에 사용되는 주어진 프레임 워크 클래스의 CSS를 확인하는 것이므로 모든 템플릿에 전역 적으로 사용되고 있습니다.

var smartPhone; 
jQuery(window).bind('resizeEnd', function() { 
    if ($(".show-for-small-only").css("display") == "block") { 
     smartPhone = 1; 
    } 
    else { 
     smartPhone = 0; 
    } 
}); 

는 희망이 도움이 :

이 재단 (foundation.zurb.com) 스마트 폰을 윈도우의 크기가 변경 될 때마다 감지 한 경우 확인 JQuery와 JS이다. 이 코드는 일부 CSS를 스마트 폰의 클래스에 추가하는 모든 프레임 워크에서 작동하도록 편집 할 수 있습니다. 그래서 나는 이것이 효과가 없다고 생각할 수 없었다. 재미있어!

또한 태블릿, 넷북 등을 감지하는 데 사용할 수 있습니다. 모든 프레임 워크에 대해 해당 코드를 분류하기가 약간 복잡 할 수 있기 때문에 친절하게 작성하고 코드를 게시하십시오. 고맙습니다.

Answer 1

부트 스트랩 코드 :

var smartPhone; 
jQuery(window).bind('resizeEnd', function() { 
    if ($(".visible-xs").css("display") == "block") { 
     smartPhone = 1; 
    } 
    else { 
     smartPhone = 0; 
    } 
});