자바 스크립트에서 미디어 쿼리?

Question

태블릿과 휴대 전화에서 사용 중지하려는 다음 스 니펫이 있습니다.

if (!! $('#sidebar').offset()) {  
     var stickyTop = $('#sidebar').offset().top;    
     $(window).scroll(function() {  
      var windowTop = $(window).scrollTop();  
      if (stickyTop < windowTop) { 
       $('#sidebar').css({ position: 'fixed', top: "120px" , right: "5%" });  
      } 
      else { 
       $('#sidebar').css('position', 'static'); 
      } 

     }); 

    } 

그리고이 같은 미디어 쿼리 또는 뭔가 내부에서 래핑하는 생각을했다 :이 늘 일이, 그래서 어떻게 작동이 코드를 멈출 것이라고 확신

if(@media (min-width:500px)){ 
if (!! $('#sidebar').offset()) { 

     var stickyTop = $('#sidebar').offset().top; 


     $(window).scroll(function() { 

      var windowTop = $(window).scrollTop(); 

      if (stickyTop < windowTop) { 
       $('#sidebar').css({ position: 'fixed', top: "120px" , right: "5%" }); 

      } 
      else { 
       $('#sidebar').css('position', 'static'); 
      } 

     }); 

    } 
} 

그러나 휴대폰에?

Answer 1

각 미디어 (가 margin:1px 경우에도) 다른 어떤 요소의 스타일을 한 후 계산 된 스타일을 감지하는 것입니다. 이 방법을 사용하면 똑같이 쉽게 CSS 미디어 규칙을 사용할 수 있으며 완벽한 호환성을 얻을 : 당신은 미디어 쿼리 안

if($("#widget").css("display")!="none){ 
    ... 
} 

참고 아니라 브라우저 기능 : CSS :

#widget{display:none} 

@media screen{ 
    #widget{display:block} 
} 

JS 다양한 태블릿의 사용자는 (일부는 심지어 키보드가) 여전히 사이드 사용할 수 있기 때문에 :이 최선의 방법 인 경우 if(document.width>600){...

Answer 2

이 같은 matchMedia() function을 사용할 수 있습니다 :이 기능은 not supported by all browsers을 그대로

if (window.matchMedia('(min-width:500px)')) { 
    // your code 
} 

은, 그러나,주의해야합니다!

편집

폴 아일랜드어 의해 polyfill는 here를 찾을 수 있습니다. 가장 좋은 해결책이 될 수

Answer 3

if($(window).width() > 499) { 
    // Code here 
} 

Answer 4

나도 몰라,하지만 :

<style type="text/css" media="screen"> 
body:after 
{ 
    content:url("javascript:(function(){document.getElementsByTagName('p')[0].innerHTML=' ';})()"); 
} 
</style> 

즉 - body 태그 뒤에 특정 javscript를 추가하기 위해 pseudoelements를 사용합니다.

또 다른 방법은 body 태그에 다른 스타일을 할당하거나 다른 미디어에 대해 hidden field 특수 문자를 할당 한 다음 jQuery 또는 일반 자바 스크립트에서이 스타일을 감지하는 것입니다.

확인 창 너비은 선호되는 방법이 아닙니다! 일반적인 화면 장치와 핸드 헬드 간의 경계가 점점 좁아지고 있습니다.

Answer 5

창 너비 감지는 약간 희박합니다. 태블릿은 휴대 기기보다 큰 화면> 500px를 특징으로합니다. userAgent sniffing 또는 detectmobilebrowsers.com/에있는 스크립트를 사용해 보시기 바랍니다. 또 다른 옵션은 터치 지원 장치

를 확인하기 위해 modernizr을 사용하는 것입니다 당신은 당신과 같이이 matchMedia polyfill을 사용할 수 @Sirko 아주 잘 지적 matchMedia를 사용하고 오래된 브라우저와의 호환성을 위해 할 수

Answer 6

:

if (matchMedia('(min-width:500px)').matches) { 
    // do your stuff 
}