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，刷新了网站，但我没有看到任何警报。

有任何解决此问题的建议吗？

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)")) {仍然只会在满足媒体查询条件时触发！

因此，如果您的屏幕大于480px且调用此脚本，则不会发出警报。

今天创建这个以在触发媒体查询时触发脚本（使用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
                    }
                }
            }

Modernizr媒体查询不起作用？

2 个答案: