Modernizrのメディアクエリが機能していませんか？

Question

私は自分のサイト上でModernizrを含ま：

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/modernizr.custom.js"></script> 

を、私はcustom.jsでこれを持っている：

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

私は、480PXであることを私のブラウザをリサイズサイトをリフレッシュし、私は」didnのアラートを確認してください。

これを修正するための提案はありますか？

Answer 1

あなたのメディアクエリで単位値pxが必要になります。

あなたの行を：

if (Modernizr.mq("screen and (max-width:480)")) {\ 

は次のようになります。

if (Modernizr.mq("screen and (max-width:480px)")) { 

Answer 2

ウェズリーは正しいですが、ちょうど簡単なメモを覚えていますif (Modernizr.mq("screen and (max-width:480px)")) {は、メディアクエリー条件が満たされた場合にだけ引き続きトリガーになります。

画面が480pxより大きく、このスクリプトが呼び出された場合、警告は表示されません。タイプミスだった

  //Test to see if media queries are acceptable 
      if(Modernizr.mq('only all')){ 
       var mql = window.matchMedia('(max-width: 980px)'); 

       mql.addListener(tabletChange); 
       tabletChange(mql); 

       function tabletChange(mediaQueryList) { 
        //If media query triggered 
        if (mediaQueryList.matches) {  
         //SMALL SCREEN 
        } else { 
         //LARGE SCREEN 
        } 
       } 

      } else { 

       var resizeTimer; 
       mediaMatchFallback(); 

       $(window).resize(function(){ 
        if(resizeTimer){ 
         clearTimeout(resizeTimer); 
        } 
        resizeTimer = setTimeout(mediaMatchFallback, 500); 
       }); 

       function mediaMatchFallback(){ 
        if($(window).width() <= 980){ 
         //SMALL SCREEN 
        }else{ 
         //LARGE SCREEN 
        } 
       } 
      }