javascript - 仅在小型设备上调用 jQuery 函数

Question

我对 javascript 和 jQuery 还很陌生，所以非常感谢帮助。

我设计了 a site从移动设备上使用 slider为小屏幕(< 500 像素)显示我的图像 block 。

放在头部的提供的 jQuery 函数 工作正常:

<script>
jQuery(function($) {
$('.slider').sss();
});
</script>

但一直有效。

我找到了一个 javascript 示例，可以根据工作得很好的窗口宽度将脚本写入头部:

var script = document.createElement('script');
script.type="text/javascript";

if(window.matchMedia("(max-width:499px)").matches) {
  jQuery(function($) {$(".slider").sss();});
}

document.getElementsByTagName('head')[0].appendChild(script);

但这不会响应不断变化的窗口大小。加载函数后，它会保持加载状态，需要手动刷新以加载或不加载函数。

必须有一种方法可以动态地执行此操作，而无需手动刷新页面。

Answer 1

您可以在调整大小事件上运行您的代码，如下所示:

function getDeviceDimension() {
    return {
        width: $(window).width()
    };
}

function setSliderSss() {
    var dd = getDeviceDimension();
    if (dd.width < 500) {
        $('.slider').sss();
    }
}

$(window).on('load resize', function() {
    setSliderSss();
});