3

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);
   }

Improve this question
3
  • What exactly about the behavior is confusing or unexpected for you? Commented Oct 28, 2019 at 23:50
  • Understand the outpout of the dev tool 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 . Commented Oct 29, 2019 at 13:14

1 Answer 1

Reset to default
6 

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.