JS 脚本仅适用于平板电脑/手机答案

【问题标题】：JS script only for tablet/mobileJS 脚本仅适用于平板电脑/手机
【发布时间】：2019-09-12 22:51:30
【问题描述】：

我遇到了菜单上的 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";
      }
      });
    }

    }

【问题讨论】：

标签： javascript html css toggle

【解决方案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
}

【讨论】：

更多信息在这里stackoverflow.com/questions/1766861/…

【解决方案2】：

你可以使用JQuery的windowwidth属性

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

【讨论】：

或window.outerWidthvanilla

【解决方案3】：

要检查窗口的宽度（跨浏览器），您可以使用 JavaScript 的 window、screen 和 width 属性。

也许对你有帮助：

//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
}

【讨论】：