I'm currently using

<script src=".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>

Now if I replace matchmedia.js to Modernizr.JS then will my above code work ?

I'm currently using

<script src="https://raw.github./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>

Now if I replace matchmedia.js to Modernizr.JS then will my above code work ?

• javascript
• jquery
• frontend
• modernizr

1 Answer 1

Modernizr uses something similar called mq. Here's the documentation: http://www.modernizr./docs/#mq.

Basically, you'd change your line to:

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