响应式JavaScript：仅针对较小的设备宽度执行代码

Question

我有一些简单的JavaScript（嵌入在一个事件中），我只想为小型设备启动。手机等......

目前我在做

if ($(window).width() < 606) {
  do_things();
}

但这感觉很笨重。有没有办法只为小于某个断点的设备执行此操作（除了设置一个早期的变量）？理想情况下，适用于我的CSS断点。

我正在使用Bootstrap，所以可能有一个简单的选项利用它。

Answer 1

您的代码可能看起来很粗糙，但实际上这简直就是媒体查询的内容。如果你看一下responsive.js的源代码（JS lib，它为旧浏览器增加了媒体查询支持），它包括这个函数：

function getDeviceWidth() {
    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        return window.innerWidth;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        return document.documentElement.clientWidth;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        return document.body.clientWidth;
    }
    return 0;
}

虽然这是检测设备宽度的更完整方法（并且这与onResize事件处理程序结合以检测诸如旋转之类的事情），但它基本上就是您正在做的事情。