2014-01-06 6 views
-1

나는 Modernizr.mq를 테스트하기 위해 다음 코드를 시도했으며 yep에 대한 js 코드를로드하려고합니다.Modernizr.load는 yep 및 nope 경고를 모두 표시합니다.

<!doctype html> 
<html class="no-js" lang="en"> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>S123</title> 
<link rel="stylesheet" href="css/s.css" /> 
<script src="js/modernizr.com.js"></script> 
    </head> 
<body> 

<script> 
    Modernizr.load({ 
    test: Modernizr.mq, 
yep : alert("hello, beautiful"), 
nope: alert("very poor choice of words"), 
}); 


    </script> 

</body> 
</html> 

그러나 그것은 나에게 모두 yepnope 경고를 제공합니다.

내가 테스트 코드 (아래) 잘 작동 왜, 아무 생각이

if (Modernizr.mq("only screen and (min-width:480px)")) { 
alert("hello"); 
}; 

누군가가 내가 뭘 잘못 말해 줄래?

답변

1

yepnopejs.com, "테스트 개체에는 무엇이 있습니까?" :

는 모더 나이저에 이렇게
yepnope([{ 
    test : /* boolean(ish) - Something truthy that you want to test    */, 
    yep : /* array (of strings) | string - The things to load if test is true */, 
    nope : /* array (of strings) | string - The things to load if test is false */, 
    both : /* array (of strings) | string - Load everytime (sugar)    */, 
    load : /* array (of strings) | string - Load everytime (sugar)    */, 
    callback : /* function (testResult, key) | object { key : fn }   */, 
    complete : /* function              */ 
}, ... ]); 

은 네는, 문자열 또는 문자열의 배열, 당신은 함수를 호출 할 수 없습니다 예상 (yepnope를 사용한다) 그래서 당신을 기반으로 함수를 호출 할 경우 브라우저는 미디어 쿼리를 지원하는지 여부 여부, 당신은 할 수 있습니다에서

if (Modernizr.mq('only all')){ 
    alert("hello, beautiful"); // or 
} else { 
    alert("very poor choice of words"); 
} 

: http://modernizr.com/docs/#mq

편집

은 일부 JS를 실행하려면 때 화면 크기가 480px보다 크면 창의 크기 조정 이벤트를 듣고 창 너비를 확인한 다음 코드를 실행해야합니다.이 경우에는 modernizr이 필요하지 않습니다. 예를 들어 (jquery 사용) :

(function($){ 
    $(document).ready(function(){ 
     $(window).resize(function() { 

      var width = $(window).width(); 
      if (width > 480){ 

       alert("over 480"); // the js you want to run 

      } 

     }); 
    }); 
})(jQuery); 

이 코드를 사용하기 전에 jquery를 포함해야합니다. 죄송합니다. jquery resize()에 대한 링크를 게시 할 수 없습니다. 연결 한도에 도달했습니다. 아래 주석에 대한 링크를 게시합니다. 건배!

+0

fosfo에 대한 의견을 보내 주셔서 감사합니다. 화면 크기가 480px보다 큰 경우 JS 코드를 추가하고 싶습니다. 어떻게 구현할 수 있습니까? – s11

+0

에서 jquery 크기 조정에 대한 자세한 내용을 볼 수 있습니다. http://api.jquery.com/resize/ – fosfo