僅在移動設備上使用某些JavaScript代碼？

Question

我正在嘗試編碼一種方式，該方式僅允許該特定的javascript代碼在小於900像素的屏幕尺寸上運行。 此代碼用於在移動設備上設置簡單的左右導航按鈕。 但是，當我嘗試使用matchMedia時，它會完全弄亂我的代碼，但不會引發任何錯誤。 您將如何處理這個問題？

   var flavorScroll = (function() {

        let widthMatch = window.matchMedia("(min-width: 901px)");


    if (widthMatch.matches) {
        var flavorBox1 = document.body.querySelector('#flavor-box-1');
        var flavorBox2 = document.body.querySelector('#flavor-box-2');
        var flavorBox3 = document.body.querySelector('#flavor-box-3');
        var flavorBox4 = document.body.querySelector('#flavor-box-4');

        var buttonRight = document.body.querySelector('#flavorButtonRight');
        var buttonLeft = document.body.querySelector('#flavorButtonLeft');

        var step = 1;

        leftButton.style.visibility = 'hidden';

        function flavorDisplayer(currentStep){
            if(currentStep === 1) {
                flavorBox1.style.display = 'block';

                flavorBox2.style.display = 'none';

                leftButton.style.visibility = 'hidden';
            } else if(currentStep === 2) {
                flavorBox2.style.display = 'block';

                flavorBox1.style.display = 'none';
                flavorBox3.style.display = 'none';

                leftButton.style.visibility = 'visible'; 
            } else if(currentStep === 3) {
                flavorBox3.style.display = 'block';

                flavorBox2.style.display = 'none';
                flavorBox4.style.display = 'none';

                rightButton.style.visibility = 'visible';
            } else if(currentStep === 4) {
                flavorBox4.style.display = 'block';

                flavorBox3.style.display = 'none';

                rightButton.style.visibility = 'hidden';
            }
        }





        buttonRight.addEventListener('click', function() {
            step += 1;

            flavorDisplayer(step);
        });

        buttonLeft.addEventListener('click', function() {
            step -= 1;

            flavorDisplayer(step);
        });

    } else {

        }

})();

Answer 1

這是我使用的便捷工具。

var breakpoint = {
  is(s) {
    const size = s.trim()
    const sizes = {
      xsmall: "480px",
      small: "576px",
      medium: "780px",
      large: "992px",
      xlarge: "1200px",
    }

    if (sizes.hasOwnProperty(size)) {
      // return mq(`only screen and (min-width: ${sizes[size]})`)
      return window.matchMedia(`only screen and (min-width: ${sizes[size]})`).matches
    }

    throw new ReferenceError(`The size ${size} is not a valid breakpoint: ${JSON.stringify(sizes)}`)
  },
}

然后，您可以將函數包裝在if語句中，即

if (breakpoint.is("medium")) {
...
}

Answer 2

使用screen.width獲取用戶正在處理的屏幕的當前大小。 然后使用該值限制執行代碼的時間。

    var scrn = screen.width
    if (scrn < 2000) { console.log(1); };