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

我刚刚接触javascript和jQuery，因此非常感谢您的帮助

我从mobile up开始设计，并使用a为小于500px的小屏幕显示我的图像块

提供的jQuery函数放置在head works中：

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

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

---

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

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

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

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

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

---

您可以在resize事件上运行代码，如下所示：

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

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

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

---

创建了一个使用setInterval的简单屏幕检测。。。只是为了与众不同

$_currentScreenWidth = $(window).width();
var screenDetection = setInterval(function() {
    $_newScreenWidth = $(window).width();
    if ($_currentScreenWidth !== $_newScreenWidth) {
        switch (true) {
            case ($_newScreenWidth <= 320): /** do something(); */  break;
            case ($_newScreenWidth > 320 && $_newScreenWidth <= 480): /** do something(); */ break;
            case ($_newScreenWidth > 480 && $_newScreenWidth <= 768): /** do something(); */  break;
            case ($_newScreenWidth > 768 && $_newScreenWidth < 960): /** do something(); */  break;
            case ($_newScreenWidth >= 960): /** do something(); */  break;
            /** add more screen sizes, and/or adjust the aforementioned accordingly */
            default: /** do something(); */  break;
        }
    }
}, 200); // adjust this value to control the interval rate, in milliseconds; the lower the rate, the greater the responsiveness.

但该事件是为此类用例构建的：

$_currentScreenWidth = $(window).width();
$(window).resize(function() {
    $_newScreenWidth = $(window).width();
    if ($_currentScreenWidth !== $_newScreenWidth) {
        switch (true) {
            case ($_newScreenWidth <= 320): console.log('<= 320'); break;
            case ($_newScreenWidth > 320 && $_newScreenWidth <= 480): console.log('> 320 <= 480'); break;
            case ($_newScreenWidth > 480 && $_newScreenWidth <= 768): console.log('> 480 <= 768');  break;
            case ($_newScreenWidth > 768 && $_newScreenWidth < 960): console.log('> 768 < 960');  break;
            case ($_newScreenWidth >= 960): console.log('>= 960');  break;
            /** add more screen sizes, and/or adjust the aforementioned accordingly */
            default: /** do something(); */  break;
        }
    }
});

---

创建了一个使用setInterval的简单屏幕检测。。。只是为了与众不同

$_currentScreenWidth = $(window).width();
var screenDetection = setInterval(function() {
    $_newScreenWidth = $(window).width();
    if ($_currentScreenWidth !== $_newScreenWidth) {
        switch (true) {
            case ($_newScreenWidth <= 320): /** do something(); */  break;
            case ($_newScreenWidth > 320 && $_newScreenWidth <= 480): /** do something(); */ break;
            case ($_newScreenWidth > 480 && $_newScreenWidth <= 768): /** do something(); */  break;
            case ($_newScreenWidth > 768 && $_newScreenWidth < 960): /** do something(); */  break;
            case ($_newScreenWidth >= 960): /** do something(); */  break;
            /** add more screen sizes, and/or adjust the aforementioned accordingly */
            default: /** do something(); */  break;
        }
    }
}, 200); // adjust this value to control the interval rate, in milliseconds; the lower the rate, the greater the responsiveness.

但该事件是为此类用例构建的：

$_currentScreenWidth = $(window).width();
$(window).resize(function() {
    $_newScreenWidth = $(window).width();
    if ($_currentScreenWidth !== $_newScreenWidth) {
        switch (true) {
            case ($_newScreenWidth <= 320): console.log('<= 320'); break;
            case ($_newScreenWidth > 320 && $_newScreenWidth <= 480): console.log('> 320 <= 480'); break;
            case ($_newScreenWidth > 480 && $_newScreenWidth <= 768): console.log('> 480 <= 768');  break;
            case ($_newScreenWidth > 768 && $_newScreenWidth < 960): console.log('> 768 < 960');  break;
            case ($_newScreenWidth >= 960): console.log('>= 960');  break;
            /** add more screen sizes, and/or adjust the aforementioned accordingly */
            default: /** do something(); */  break;
        }
    }
});

编织：

可以使用事件侦听器调用函数；有了这个，你可以添加进去，并且通过在$this.width<500中使用say，你可以更改移动设备和桌面所需的任何元素的名称

这里有一个简单的例子

$window.onload调整大小，函数{ 如果$this.width<500{ $[data action=change].htmlMobile }否则{ $[data action=change].htmlDesktop } } 身体{ 填充：1em； 文本对齐：居中； } 桌面 编织：

可以使用事件侦听器调用函数；有了这个，你可以添加进去，并且通过在$this.width<500中使用say，你可以更改移动设备和桌面所需的任何元素的名称

这里有一个简单的例子

$window.onload调整大小，函数{ 如果$this.width<500{ $[data action=change].htmlMobile }否则{ $[data action=change].htmlDesktop } } 身体{ 填充：1em； 文本对齐：居中； } 桌面

---

在这种情况下，更改窗口大小真的很重要吗？如果您只为小型设备构建它，您应该只关心所述小型设备的最大宽度，它们的大小调整不会超过从纵向到横向的变化。与其依赖于大小调整，不如尝试使用此处提供的解决方案检测设备并基于此调用方法。不要怀疑解决方案，但我个人不会推荐它，因为不同的人的分辨率是如此的不同，更不用说像android这样的桌面版本了。我认为，如果您需要声明某个特定于该操作系统的内容，您应该只针对该供应商操作系统。比如说一个应用程序。否则，我觉得这是不必要的，也是不好的做法，但每个开发人员都有自己的风格。说得好@KevinB这个网站不仅仅是针对小型设备的，我从小型开始并不断扩展，而不是相反。从纵向到横向的变化跨越了使用或不使用脚本的门槛。那么您的问题就相当复杂了。你不能只是。。。撤销javascript，你必须解除事件绑定，删除元素并替换旧的，等等。如果你的插件不支持开箱即用，祝你好运。在这种情况下改变窗口大小真的重要吗？如果您只为小型设备构建它，您应该只关心所述小型设备的最大宽度，它们的大小调整不会超过从纵向到横向的变化。与其依赖于大小调整，不如尝试使用此处提供的解决方案检测设备并基于此调用方法。不要怀疑解决方案，但我个人不会推荐它，因为不同的人的分辨率是如此的不同，更不用说像android这样的桌面版本了。我认为，如果您需要声明某个特定于该操作系统的内容，您应该只针对该供应商操作系统。比如说一个应用程序。否则，我觉得这是不必要的，也是不好的做法，但每个开发人员都有自己的风格。说得好@KevinB这个网站不仅仅是针对小型设备的，我从小型开始并不断扩展，而不是相反。从纵向到横向的变化跨越了使用或不使用脚本的门槛。那么您的问题就相当复杂了。你不能只是。。。撤销javascript，您必须解除事件绑定、删除元素并替换旧的元素，等等。如果您的插件不支持这种开箱即用的方式，祝您好运。