【问题标题】:Is MatchMedia.js included in Modernizr JS?Modernizr JS 中是否包含 MatchMedia.js?
【发布时间】:2011-12-22 09:40:55
【问题描述】:

我正在使用

<script src="https://raw.github.com/paulirish/matchMedia.js/master/matchMedia.js"></script>

<!--    <script>

</script>-->

    <script>
        if (matchMedia('only screen and (min-width : 1025px) and (max-width : 2048px)').matches) {
  // smartphone/iphone... maybe run some small-screen related dom scripting?



    $( document ).ready( function() {
                var $body = $('body'); //Cache this for performance

                var setBodyScale = function() {
                    var scaleFactor = 0.5,
                        scaleSource = $body.width(),
                        maxScale = 150,
                        minScale = 10;

                    var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

                    if (fontSize > maxScale) fontSize = maxScale;
                    if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

                    $('body').css('font-size', fontSize + '%');
                }

                $(window).resize(function(){
                    setBodyScale();
                });

                //Fire it when the page first loads:
                setBodyScale();
            });
            }
            </script>

现在,如果我将 matchmedia.js 替换为 Modernizr.JS,那么我上面的代码可以工作吗?

【问题讨论】:

    标签: javascript jquery frontend modernizr


    【解决方案1】:

    Modernizr 使用类似于 mq 的东西。这是文档:http://www.modernizr.com/docs/#mq

    基本上,您会将您的线路更改为:

    if (Modernizr.mq('only screen and (min-width : 1025px) and (max-width : 2048px)')) {
    

    【讨论】:

    • 所以更换modernizr后。我只需要把matchMedia换成mq
    • 我们还需要删除.matches吗?
    • 我正在使用if (Modernizr.mq('only screen and (min-width : 1025px) and (max-width : 2047px)').matches) {,但它不起作用
    • 您应该确保您的 Modernizr 版本首先包含此功能。我以前用过这个没有问题。也许您应该首先使用一个非常简单的查询(可能是文档中的一个)来处理它,然后再转到您的真实代码。
    • 我知道我迟到了,但我只是遇到了这个。 @Jitendra:他还说要删除 .matches! modernizr.com/docs/#mqcraftedpixelz.co.uk/blog/conditional-js-with-modernizr-mq
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-25
    • 1970-01-01
    • 1970-01-01
    • 2015-04-11
    • 2014-03-02
    • 1970-01-01
    相关资源
    最近更新 更多