calling javascript function checking media

Question

I have a media query css block for the ipad

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
}

and for laptop and desktops @media only screen and (min-width : 1224px) { }

I have a js function which needs to have different parameters depending upon which device I am on. So lets say something like this

if(@media only screen && (min-width : 1224px)){
    function operation(){
       var x = 2;
    }
}




if(@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)){
        function operation(){
           var x = 7;
        }
    }

Conceptually thats what I am trying to achieve which is definitely incorrect syntactically

Any help will be highly appriciated

score 1 · Answer 1 · answered Apr 19 '14 at 15:45

1

Not sure how it works behind the scenes (and right now I'm to lazy to find out) but the Modernizr-library has a method called Modernizr.mq(string) that will evaluate a media query and return a boolean.

It could be used like this (assuming modernizr is loaded and has the mq-method available).

if(Modernizr.mq('@media only screen && (min-width : 1224px)')) {
  function operation(){
    var x = 2;
  }
}

answered Apr 19 '14 at 15:45

Karl-Johan Sjögren

16,544
7
59
68

this is good but I rather not use modernizer for just a small thing. Its another inclusion. But this is really good – soum Apr 19 '14 at 16:19
The code is available at Github so you might still want to check it out if you want to support older browsers as well. It has some nifty fallbacks (and also checks for the prefixed version of matchMedia from Microsoft). https://github.com/Modernizr/Modernizr/blob/master/src/testMediaQuery.js – Karl-Johan Sjögren Apr 19 '14 at 20:52

score 1 · Accepted Answer · answered Apr 19 '14 at 15:59

Try the following code. The code you wrote is syntactically wrong. I hope the code below will help you.

if (window.matchMedia('only screen and (min-width: 1224px)').matches) {
   function operation(){
      var x = 2;
   }

} 

if(window.matchMedia('only screen and (min-width: 768px) and (max-width: 1024px)').matches) {
     function operation(){
       var x = 7;
     }
}

score 0 · Answer 3 · answered Apr 19 '14 at 15:46

You have to use following syntax

<script>
         $(document).ready(function () {
         var mql = window.matchMedia("(min-width: 480px)");
         if (matchMedia('all and ').mql) {
                function operation(){
                   var x = 2;
                }
            }

            });
</script>

score 0 · Answer 4 · edited May 23 '17 at 12:20

You could use the function mentioned in this answer to achieve what you want, like this:

var viewportDimensions = getViewport(), viewportWidth = viewportDimensions[0], viewportHeight = viewportDimensions[1];
if(viewportWidth > 1224)
{
   function operation(){
       var x = 2;
    }
}
if(viewportWidth > 768 && viewportWidth < 1024)
{
   function operation(){
       var x = 2;
    }
}

This method works on all browsers and doesn't need any external library dependencies.

score 0 · Answer 5 · answered Apr 19 '14 at 15:57

How about getting the width of the window instead?

var windowWidth = $(window).width();
if(windowWidth > 1224px){
    function operation(){
      var x = 2;
    }
}

if(windowWidth > 768px) && windowWidth < 1024px){
    function operation(){
       var x = 7;
    }
}

calling javascript function checking media

5 Answers5