Saya mencoba memeriksa ukuran layar dengan Javascript. Elemen saya akan dianimasikan secara berbeda tergantung pada ukuran layar.

Saya pikir saya tidak terlalu jauh dari hasil tetapi tanpa benar-benar memahaminya.

Ketika saya memuat halaman saya memiliki console.log yang muncul dua kali terlepas dari ukuran jendela.

Dengan memperkecil jendela secara manual, dengan menyeret mouse, ada: - 2 console.log('MD') bila ukuran MD ok - 1 console.log('SM') bila ukuran SM ok

Dengan memperbesar jendela secara manual, dengan menyeret mouse, ada: - 1 console.log('MD') bila ukuran MD ok - 1 console.log('SM') bila ukuran LG ok - 1 console.log('LG') ketika ukuran untuk LG ok

Namun dengan menyesuaikan ukuran window dengan icon browser, console.log saya sudah sesuai dengan keinginan saya.

Apakah mungkin untuk memiliki penjelasan lebih lanjut?

Saya harap saya telah membuat diri saya jelas.

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);
   }
1
user7637140 29 Oktober 2019, 01:51

1 menjawab

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

Saya mencari tahu tapi mungkin ada solusi yang lebih baik?

DIEDIT

Dengan solusi di atas, fungsi saya tidak dimulai ketika halaman saya dimuat atau saat menyegarkan jadi saya harus melakukan ini

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

Jika saya meletakkan kueri media saya dalam sebuah array dan menggunakan loop pada setiap refresh, sebanyak mungkin output di konsol saya sebagai item dalam array saya

Mungkin ada sesuatu yang saya tidak mengerti.

4
30 Oktober 2019, 03:53