javascript - 仅适用于平板电脑/手机的 JS 脚本

Question

我在使用菜单上的 js 脚本时遇到问题。我有相同的菜单，但针对 PC 和较小版本的样式有所不同。我希望此脚本仅在屏幕低于 x 宽度时影响菜单。我怎样才能做到这一点？这是我的脚本

    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
}