I'm trying to check the screen size with Javascript. My elements will be animated differently depending on the size of the screen.

I think I am not too far from the result but without really fully understanding it.

When I load the page I have a console.log that appears twice regardless of the size of the window.

By reducing the window manually, by dragging the mouse, there is: - 2 console.log('MD') when the size for MD is ok - 1 console.log('SM') when the size for SM is ok

By enlarging the window manually, by dragging the mouse, there is: - 1 console.log('MD') when the size for MD is ok - 1 console.log('SM') when the size for LG is ok - 1 console.log('LG') when the size for LG is ok

But by adjusting the size of the window with the browser icon, my console.log are as I wish.

Would it be possible to have more explanation?

I hope I've made myself clear.

let mqls = [

    window.matchMedia('screen and (min-width: 768px) and (max-width: 991px'),
    window.matchMedia('screen and (min-width: 992px)')
    
  ];


  function test(mql){

    if( mqls[0].matches ){

        console.log('MD')
    }

    else if( mqls[1].matches ){

        console.log('LG')
    }
    else if( !mqls[0].matches && !mqls[1].matches ){

        console.log('SM')
    }
  }

   for ( let i =0; i < mqls.length; i++ ){

     test(mqls[i]);
     mqls[i].addListener(test);
   }

I'm trying to check the screen size with Javascript. My elements will be animated differently depending on the size of the screen.

I think I am not too far from the result but without really fully understanding it.

When I load the page I have a console.log that appears twice regardless of the size of the window.

By reducing the window manually, by dragging the mouse, there is: - 2 console.log('MD') when the size for MD is ok - 1 console.log('SM') when the size for SM is ok

By enlarging the window manually, by dragging the mouse, there is: - 1 console.log('MD') when the size for MD is ok - 1 console.log('SM') when the size for LG is ok - 1 console.log('LG') when the size for LG is ok

But by adjusting the size of the window with the browser icon, my console.log are as I wish.

Would it be possible to have more explanation?

I hope I've made myself clear.

let mqls = [

    window.matchMedia('screen and (min-width: 768px) and (max-width: 991px'),
    window.matchMedia('screen and (min-width: 992px)')
    
  ];


  function test(mql){

    if( mqls[0].matches ){

        console.log('MD')
    }

    else if( mqls[1].matches ){

        console.log('LG')
    }
    else if( !mqls[0].matches && !mqls[1].matches ){

        console.log('SM')
    }
  }

   for ( let i =0; i < mqls.length; i++ ){

     test(mqls[i]);
     mqls[i].addListener(test);
   }

• javascript
• html
• css
• media-queries

• What exactly about the behavior is confusing or unexpected for you? – Alexander Nied Commented Oct 28, 2019 at 23:50
• Understand the outpout of the dev tool – user7637140 Commented Oct 29, 2019 at 0:05
• Variable mqls is an array with two elements, you made for loop to check screen size, so the console output will be twice according to mqls array length . – Ahmed Tag Amer Commented Oct 29, 2019 at 13:14

1 Answer 1

function checkScreen(){


  const checkMobile = window.matchMedia('screen and (max-width: 575px)');
  const checkTablet = window.matchMedia('screen and (min-width: 576px) and (max-width: 991px)');
  const checkDesktop = window.matchMedia('screen and (min-width: 992px)');

  checkMobile.addListener(function(e){

    if(e.matches) {

        console.log('MOBILE');
    }
  });

  checkTablet.addListener(function(e){

    if(e.matches) {

        console.log('TABLET');
    }
  });

  checkDesktop.addListener(function(e){

    if(e.matches) {

        console.log('DESKTOP');
    }
  });

  
  
}
checkScreen()

I figure it out but maybe there is better solution ?

EDITED

with the solution above my function doesn't start when my page loads or when refreshing so I have to do this

mobile();
function mobile(){

    const mql = window.matchMedia('screen and (max-width: 575px)');

    checkMedia(mql);
    mql.addListener(checkMedia);

    function checkMedia(mql){

        if(mql.matches){

            console.log('Mobile');
        }
    }
}

tablet();
function tablet(){

    const mql = window.matchMedia('screen and (min-width: 576px) and (max-width: 991px)');

    checkMedia(mql);
    mql.addListener(checkMedia);

    function checkMedia(mql){

        if(mql.matches){

            console.log('tablet');
        }
    }
}


desktop();
function desktop(){

    const mql = window.matchMedia('screen and (min-width: 992px)');

    checkMedia(mql);
    mql.addListener(checkMedia);

    function checkMedia(mql){

        if(mql.matches){

            console.log('desktop');
        }
    }
}

If I put my media queries in an array and use a loop at each refresh as much output in my console as item in my array

There's probably something I don't understand.