modernizr - 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");
}

我将浏览器的大小调整为 480 像素，刷新了网站，但没有看到任何警报。

有什么建议可以解决这个问题吗？

Answer 1

px您需要媒体查询中的单位值：

您的线路：

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

应该：

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

Answer 2

Wesley 是对的，但要记住的只是一个简短的说明，它if (Modernizr.mq("screen and (max-width:480px)")) {仍然只有在满足媒体查询条件时才会触发！

因此，如果您的屏幕大于 480 像素并且调用了此脚本，它不会发出警报。

就在今天创建了这个以在触发媒体查询时触发脚本（使用 IE 回退）：

            //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
                    }
                }
            }