当用户调整大小时禁用特定宽度的 js windows

Question

我尝试在用户达到特定宽度时禁用某些 JS (backstrech)。

我使用类似的东西：

if (window.innerWidth >= 768) {
/* the function
}

而且有效。

但我遇到了一个问题，因为它只有在用户以这种特定大小打开网站时才有效。

如果他调整网站大小，这将不起作用...

我尝试使用 $(window).resize.

但我没有找到如何使用它，也没有告诉函数在调整这个特定尺寸时工作。

有人有想法吗？

Answer 1

本题：How to trigger the window resize event in JavaScript?

回答了一个类似的问题，这里是该答案 fiddle 的一个片段，它通过注册一个在 window resize:

时触发的事件来解决你的问题

window.onresize = doALoadOfStuff;

function doALoadOfStuff(x) {
    alert('Go' + x);
}

var handler = window.onresize;
//handler();
//or
handler.apply(window, [' On']);

您需要做的就是在 doALoadOfStuff 方法中使用简单的 if 检查处理程序中 window 的大小：

function doALoadOfStuff(){
   var windowSize = window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;

   if(windowSize > 768) {
      //DoSomething
   }
}

正在 fiddle 演示代码，如果您将中央屏幕分区拖动到左侧，您将开始收到控制台消息，告诉您它正在按预期运行。它会在页面加载时立即启动。

Answer 2

所以我找到了一个 100% 可行的解决方案... 也许有一天可以帮助 backstrech 的用户。如此简单，但试图让我的生活复杂化。只需要一个简单的 css 行：

@media (max-width: 768px) {
  .backstrech{
  display: none;
  }
}

感谢您的帮助，这将帮助我完成另一件事。

Answer 3

这对我有用...

if (window.innerWidth <= 500 ) {
    function showSlides(display)    
} else {
    display(none)
}

当用户调整大小时禁用特定宽度的 js windows

Disable js for a specific width when user resize windows

javascript

resize