javascript - 根据屏幕尺寸启用/禁用 Javascript

Question

我正在创建一个响应式网站，在其中使用滑出面板在桌面版本上显示内容。

对于我的选项卡/移动网站，我不会使用它，因为它与响应式移动导航一起看起来很奇怪。

我想找到一种方法来启用/禁用此滑出 JS，而不需要重新加载网站。

我一直在查看以下帖子，但这些帖子都要求我重新加载页面，它们都不允许我仅根据屏幕重新大小启用/禁用 JS。

how to disable javascript for responsive design

disabling javascript plugin based on window size

jQuery: Disable & Enable Plugin based on browser window size?

Answer 1

您可以创建一个容器，其中包含静态图像作为默认 slider 的别名。这个容器(比如说#staticImg)在宽屏幕上是不可见的。

在较窄的屏幕中，隐藏原始 div(容纳 slider 的 div)并显示 #staticImg 代替原始 slider 。

CSS

#staticImg { display:none }

@media all and (max-width: 450px) { 
    #originalHolder { display:none }
    #staticImg { display:block }
}

Javascript 仍然可以工作，但 slider 将不可见