基于媒体查询的可选Javascript执行

我试图弄清楚如何根据当前设备/媒体查询选择运行javascript块。我使用的是Twitter引导，基本上有两个媒体查询版本：

@media (min-width: 980px) { ... } <!-- Desktops -->
@media (max-width: 979px) { ... } <!-- Smaller screens/tablets/phones -->

---

我曾经有人在他们的媒体查询中将CSS属性设置为特定的值，然后尝试根据CSS属性在DOM中查找该元素，但肯定有更好的方法。有什么想法吗？

用javascript怎么样

<script type="text/javascript">

if (screen.width < 980) { 

document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>');

} else { 

document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>');

} 

</script>

如果（屏幕宽度<980）{
文件。写（“”）；
}否则{
文件。写（“”）；
} 

您还可以使用名为minwidth的插件：

minwidth(940, function () {
  //do whatever you need
});

但它仅在页面加载时有效，而在调整大小时无效

---

您可能会发现inquire.js库非常有用：

---

CSS技巧文章：

当前接受的答案不够好，您应该检查窗口。matchMedia

您可以检测视口标注的更改，但必须计算方向和纵横比等因素，并且不能保证在应用媒体查询规则时，我们的计算将符合浏览器的假设

我的意思是，你可以计算X，但你的浏览器假设可以是Y。 因此，我认为最好使用相同的浏览器规则，window.matchMedia可以做到这一点

var jmediaquery = window.matchMedia( "(min-width: 480px)" )
if (jmediaquery.matches) {
    // window width is at least 480px
}
else {
    // window width is less than 480px
}

您甚至可以使用侦听器接收查询通知

var jmediaquery = window.matchMedia("(orientation: portrait)");
jmediaquery.addListener(handleOrientationChange);
handleOrientationChange(jmediaquery);

function handleOrientationChange(jmediaquery) {
    if (jmediaquery.matches) {
        // orientation changed
    }
}

如果您不再需要接收有关更改的通知，只需调用removeListener（）

---

有趣的是，我认为这将是一个可接受的解决方案。谢谢。如果可以调整窗口宽度，您可能需要添加对窗口宽度变化的监视？我主要关心的不是在移动设备上浪费带宽，因此在这种情况下，宽度变化不太可能影响我的目标。@jfriend00:screen.width或screen.height处理的是显示的大小，而不是窗口的大小。显示器的大小是由硬件固定的，不能改变。@frenchie-当设备旋转时如何？非常有用的库，尽管我在我的特定实例中考虑，纯Javascript可能是最轻的解决方案。感谢您指出我的疑问，我可能会在未来的项目中使用它。好主意！感谢您更新此问题。如果您调整浏览器窗口大小，接受的答案不允许您检查结果，因此出于开发目的，此答案更好。太棒了！伟大的洞察力，+1这是伟大的了解！谢谢我们就是这样做的+1.

var jmediaquery = window.matchMedia("(orientation: portrait)");
jmediaquery.addListener(handleOrientationChange);
handleOrientationChange(jmediaquery);

function handleOrientationChange(jmediaquery) {
    if (jmediaquery.matches) {
        // orientation changed
    }
}

jmediaquery.removeListener(handleOrientationChange);