JS скрипт только для планшета / мобильного

Question

У меня проблемы со скриптом js в меню. У меня такое же меню, но стилизованные по-разному для ПК и небольших версий. И я хочу, чтобы этот скрипт влиял только на меню, когда экран меньше ширины х. Как мне этого добиться? Это мой сценарий

    var dropdown = document.getElementsByClassName("dropdown-btn");
    var i;

    for (i = 0; i < dropdown.length; i++) {
      dropdown[i].addEventListener("click", function() {
      var dropdownContent = this.nextElementSibling;
      if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
      } else {
      dropdownContent.style.display = "block";
      }
      });
    }

    }

Answer 1

Проверьте ширину окна (кросс-браузер), затем условно запустите ваш скрипт.

var x = 400,
w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (w < x) {
  console.log(w, 'true')
  // do stuff here when screen is smaller
} else {
  console.log(w, 'false')
  // do stuff here when screen is larger
}

Answer 2

Чтобы проверить ширину окна (кросс-браузер), вы можете использовать window, screen и width свойство JavaScript.

Это может помочь вам:

//Smaller screen sizes
var size = 768; 
if(window.screen.width < size) {
    //Your code for smaller screen sizes here
}
else
{
    //Your code for Larger screen sizes here
}

Answer 3

Вы можете использовать window width свойство JQuery

if ($(window).width() < x)
{
    //Code here
}