如何让 Javascript 在特定屏幕尺寸上运行？

Question

下面是我用于网站移动菜单的一些 Javascript。当移动菜单打开时，此 Javascript 会阻止菜单外部的内容滚动，并在单击菜单内部的项目时关闭菜单。

document.getElementById('cp_toggle03').onchange = function() {
 if (document.getElementById('cp_toggle03').checked) {
 document.body.style.overflow = "hidden";
  } else {
 document.body.style.overflow = "";
  }

}


var elements = document.getElementsByTagName('li');
var closeHamp = function() {
 document.getElementsByClassName('cp_menuicon')[0].click();
    };



for (var i = 0; i < elements.length; i++) {
 elements[i].addEventListener('click', closeHamp, false);
    }

有没有办法设置它，使该代码仅在特定的屏幕尺寸上运行？我已经尝试使用此 Javascript 来执行此操作，但没有运气让它正常运行。

function execute(){
   if(screen.width <= 768) {
   
     }

如果有人对如何让这个 Javascript 在特定的屏幕尺寸上工作有任何建议，我会很感激你让我知道。

我的网站

Answer 1

我认为您正在寻找

document.body.clientWidth

，它代表 body 标签的大小（不包括边框，但包括填充）。您使用的

screen

变量代表真实的屏幕宽度（例如：1920），因此它不会随着浏览器大小的调整而改变

Answer 2

可以结合使用JS和window.matchMedia方法。此方法允许您添加屏幕尺寸变化的监听器，并有条件地执行所需的功能。