javascript中的多媒体查询

Question

我正在试着用Javascript检查屏幕大小。根据屏幕的大小，我的元素会有不同的动画效果。

我想我离结果并不太远，但并没有真正完全理解它。

加载页面时，无论窗口大小如何，console.log都会出现两次。

通过拖动鼠标手动缩小窗口:当-2\f25 MD -2\f6的尺寸为-2\f25 ok -2\f6时，出现-2\f25 console.log-2\f6(-2\f25‘MD’-2\f6)-2\f6(-2\f25‘MD’-2\f6)-2\f6(-2\f25‘SM’-2\f6)-2\f6(-2\f25‘SM’-1\f6)-1\f6

通过拖动鼠标手动放大窗口:当-1\f25 MD -1\f6的尺寸为-1\f25 ok -1\f6时-1\f25 console.log('MD') -1\f6(-1\f25‘SM’-1\f6)-1\f6当-1\f25 LG -1\f6的尺寸为-1\f25 ok -1\f25 console.log-1\f6(-1\f25‘LG’-1\f6)-1\f6时-1\f25-1\f25‘LG’-1\f6

但通过使用浏览器图标调整窗口的大小，我的console.log如我所愿。

可以有更多的解释吗？

我希望我已经说得很清楚了。

​

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

​

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()

​

我想出来了，但也许有更好的解决方案？

编辑过的

使用上面的解决方案，我的函数不会在页面加载或刷新时启动，所以我必须这样做

​

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

​

如果我将媒体查询放在一个数组中，并在每次刷新时使用一个循环，那么控制台中输出与数组中的项一样多

可能有什么我不明白的。